vue-cli3+typescript新建一个项目的思路分析
最近在用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.vue和HelloWorld.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
下一篇：Vue-drag-resize 拖拽缩放插件的使用(简单示例)
本文标题：vue-cli3+typescript新建一个项目的思路分析
本文地址：http://www.codeinn.net/misctech/202950.html
