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命令后,可以选择初始配置。为了学习,我选择自定义,并把所有可选内容都勾选上。其余配置项基本就按默认的来,最终的配置情况如下。
"htmlcode">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-cli3+typescript新建一个项目的思路分析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
下一篇:Vue 中可以定义组件模版的几种方式