vue-cli3+typescript新建一个项目的思路分析


Posted in Javascript onAugust 06, 2019

最近在用vue搭一个后台管理的单页应用的demo,因为之前只用过vue-cli2+javascript进行开发,而vue-cli3早在去年8月就已经发布,并且对于typescript有了很好地支持。所以为了熟悉新技术,我选择使用vue-cli3+typescript进行新应用的开发。这里是新技术的学习记录。

初始化项目

卸载老版本脚手架,安装新版本脚手架后,开始初始化项目。初始化的命令跟2.x版本的略有不同,以前是 vue init webpack project-name ,而现在是 vue create project-name 。vue-cli3已经完全把webpack绑定了,这也就意味着无法像以前那样选择别的打包工具比如webpack-simple。如果一定要用webpack-simple,可以额外安装 @vue/cli-init ,可以在不卸载cli3的情况下使用init命令进行初始化。输入create命令后,可以选择初始配置。为了学习,我选择自定义,并把所有可选内容都勾选上。其余配置项基本就按默认的来,最终的配置情况如下。

? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection)Babel, TS, PWA, Router, Vuex, CSS Pre-process
ors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Use history mode for router? (Requires proper server setup for index fallback 
in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)Lint on save
? Pick a unit testing solution: Jest
? Pick a E2E testing solution: Cypress
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In packag
e.json
? Save this as a preset for future projects? (y/N) n

然后需要一点时间来下载npm包,初始化完成后,看一下工程目录,可以看到跟vue-cli2的还是有很多不一样的地方。router和store都变成了单独的文件,而不是以前的文件夹,当然如果有需要的话可以自己建这两个文件夹。

最大的区别在于webpack配置都被隐藏起来了,默认没有了那些config文件,现在如果需要修改webpack配置项,可以在根目录新建一个 vue.config.js进行配置。这种的配制方法在2.x版本也可以用,内容也跟之前的类似。

module.exports = {
 baseUrl: '/',
 devServer: {
  before: app => {
  },
  proxy: {
   '/api': {
    target: 'http://api.com',
    changeOrigin: true
   }
  }
 },
 configureWebpack: {
  resolve: {
   alias: {
    'coms': '@/components'
   }
  }
 }
}

vue组件

项目初始化后的Home.vueHelloWorld.vue很好地举例说明了新的写法。

<!-- home.vue -->
<template>
 <div class="home">
  <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
 </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
@Component({
 components: {
  HelloWorld,
 },
})
export default class Home extends Vue {}
</script>
<!-- helloworld.vue -->
<template>
 <div class="hello">
  <h1>{{ msg }}</h1>
 </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class HelloWorld extends Vue {
 @Prop() private msg!: string;
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>

style 部分跟之前的并没有区别, template 部分的自定义组件变成了单标签的写法。最大的变化在于 script 部分。vue-cli3加入了更加流行的class写法,并且引入了许多面向对象语言(比如python)都有的装饰器。

装饰器其实是一个返回函数的高阶函数,接受一个函数对象作为参数,返回一个函数并赋值给原对象,它的作用主要是减少代码量。现在可以把组件的name和引用的别的component加到 @Component 后面,像Home.vue中那样。其他的方法和属性,可以直接写到class里面。因为是class的写法,所以也不需要 data(){return} ,可以直接写属性和方法。在写的时候,注意还有些地方会用到装饰器,常见的有 @Prop @Watch @Emit ,都需要单独引用。Prop在HelloWorld.vue中就有例子。Watch的使用如下

@Watch("page")
 onPageChanged(newValue: number) {
  //doSomething
 }

watch的对象是个字符串,后面跟着的就是watch的操作。这里的函数名并没有任何意义,只要不重复即可。

Emit的用法如下

@Emit('msg')
 dosomething() {
 }

另外计算属性的写法也有所不同,不再需要computed关键字,而是直接用get写法

get route() {
  return this.$route;
 }

至于生命周期钩子,则跟原来的都差不多。只不过写的时候,要注意typescript语法。在对象声明的时候,要加上 msg : string 类型标识。在有一些对象引用的地方,对于一些未知类型的引用,可以加上 (msg as any) 的标识。不加这些的话,会有错误提醒,但是不影响运行。

测试

todo

总结

以上所述是小编给大家介绍的vue-cli3+typescript新建一个项目的思路分析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jquery ui dialog里调用datepicker的问题
Aug 06 Javascript
什么是json和jsonp,jQuery json实例详详细说明
Dec 11 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
Mar 05 Javascript
jQuery中removeClass()方法用法实例
Jan 05 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
Apr 24 Javascript
JQuery用户名校验的具体实现
Mar 18 Javascript
jQuery轮播图效果精简版完整示例
Sep 04 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 Javascript
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
Node.js JSON模块用法实例分析
Jan 04 Javascript
简单了解JavaScript中的执行上下文和堆栈
Jun 24 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 Javascript
Vue 中可以定义组件模版的几种方式
Aug 06 #Javascript
angularjs请求数据的方法示例
Aug 06 #Javascript
通过js示例讲解时间复杂度与空间复杂度
Aug 06 #Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
Aug 06 #Javascript
JS中如何轻松遍历对象属性的方式总结
Aug 06 #Javascript
VUE组件中的 Drawer 抽屉实现代码
Aug 06 #Javascript
浅入深出Vue之自动化路由
Aug 06 #Javascript
You might like
虫族 Zerg 历史背景
2020/03/14 星际争霸
PHP第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
php中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
php在数据库抽象层简单使用PDO的方法
2015/11/03 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
JavaScript 类似flash效果的立体图片浏览器
2010/02/08 Javascript
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
基于jquery的页面划词搜索JS
2010/09/14 Javascript
jcarousellite.js 基于Jquery的图片无缝滚动插件
2010/12/30 Javascript
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
Nodejs Post请求报socket hang up错误的解决办法
2014/09/25 NodeJs
JavaScript计划任务后台运行的方法
2015/12/18 Javascript
理解javascript对象继承
2016/04/17 Javascript
jquery popupDialog 使用 加载jsp页面的方法
2016/10/25 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
2017/05/13 jQuery
JS实现浏览上传文件的代码
2017/08/23 Javascript
分享vue里swiper的一些坑
2018/08/30 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
2019/04/24 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
2019/11/01 Javascript
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
[03:20]次级联赛厮杀超职业 现超级兵对拆世纪大战
2014/10/30 DOTA
Python获取央视节目单的实现代码
2015/07/25 Python
Python自动发邮件脚本
2017/03/31 Python
centos 安装python3.6环境并配置虚拟环境的详细教程
2018/02/22 Python
Python实现的建造者模式示例
2018/08/06 Python
Python 面向对象之封装、继承、多态操作实例分析
2019/11/21 Python
python实现一个猜拳游戏
2020/04/05 Python
Python yield生成器和return对比代码实例
2020/04/20 Python
几款好用的python工具库(小结)
2020/10/20 Python
整理的15个非常有用的 HTML5 开发教程和速查手册
2011/10/18 HTML / CSS
Shopty西班牙:缝纫机在线销售
2018/01/26 全球购物
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
财务管理专业推荐信
2013/11/19 职场文书
创先争优活动党员公开承诺书
2014/08/29 职场文书
2016年读书月活动总结范文
2016/04/06 职场文书