微客导航 » 文章资讯 » vue-cli3+typescript新建一个项目的思路分析

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

2023-08-18 02:44:06 186

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

初始化项目

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

?Pleasepickapreset:Manuallyselectfeatures
?Checkthefeaturesneededforyourproject:(Presstoselect,tot
oggleall,toinvertselection)Babel,TS,PWA,Router,Vuex,CSSPre-process
ors,Linter,Unit,E2E
?Useclass-stylecomponentsyntax?Yes
?UseBabelalongsideTypeScriptforauto-detectedpolyfills?Yes
?Usehistorymodeforrouter?(Requiresproperserversetupforindexfallback
inproduction)No
?PickaCSSpre-processor(PostCSS,AutoprefixerandCSSModulesaresupported
bydefault):Sass/SCSS(withdart-sass)
?Pickalinter/formatterconfig:Basic
?Pickadditionallintfeatures:(Presstoselect,totoggleall,toinvertselection)Lintonsave
?Pickaunittestingsolution:Jest
?PickaE2Etestingsolution:Cypress
?WheredoyoupreferplacingconfigforBabel,PostCSS,ESLint,etc.?Inpackag
e.json
?Savethisasapresetforfutureprojects?(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很好地举例说明了新的写法。

import{Component,Vue}from'vue-property-decorator'; importHelloWorldfrom'@/components/HelloWorld.vue';//@isanaliasto/src @Component({ components:{ HelloWorld, }, }) exportdefaultclassHomeextendsVue{} import{Component,Prop,Vue}from'vue-property-decorator'; @Component exportdefaultclassHelloWorldextendsVue{ @Prop()privatemsg!:string; }

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写法

getroute(){ returnthis.$route; }

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

测试

todo

总结

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

上一篇
Java常用内置注解用法分析下一篇
Kotlin如何捕获上下文中的变量与常量详解

热门推荐

1 毛坯房验收经验和常识看了之后再验房心里有底

2 二手房收房如何交接二手房收房注意问题

3 专业验收毛坯房的价格商品房验收合格的标准

4 精装房怎么验收精装房请验房师有用吗

5 一般要到哪里找验房师验房师有哪些作用呢

6 请人验房一般是多少钱验房师费用是多少

7 怎样测量房子面积建筑面积和使用面积怎么算

8 收房需要注意什么仔细检查不松懈

9 收房时三书一证一表是什么主要作用介绍

10 交房时交房税费有哪些本文为你一一讲解

11 验房都需要验什么要做哪些准备呢

12 毛坯房验房师有必要请吗毛坯房装修完如何验收

13 地下室防水工程质量验收规范详解

14 水性涂料、油性涂料区别介绍

15 零基础布艺DIY工坊教你做超萌猫头鹰钥匙包

16 三棵树漆怎么样？三棵树漆官方网站

17 家庭“装修套餐”中猫腻你知道吗？

18 小空间大浴望卫浴间装修巧支招

随机推荐

祝长辈中秋祝福语简短

老板离职了简短祝福语

酸奶店开业祝福语简短

天冷祝福语简短暖心

蛋糕祝福语简短给老公

初中老师结婚祝福语简短

历史老师结婚祝福语简短

不同的生日祝福语简短

医师节晚宴祝福语简短

祝别人99祝福语简短

装修开工祝福语简短霸气

过年祝福语简短走心

去读大学祝福语简短

砸墙祝福语简短霸气

生日恩爱祝福语简短精辟

好的结婚祝福语简短

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

{{msg}}

热门推荐

随机推荐