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

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

2023-08-18 02:44:06 63

最近在用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 小空间大浴望卫浴间装修巧支招

随机推荐

C#编程获取IP地址的方法示例

Jquery树插件zTree实现菜单树

android listview的多列模版实例代码

Android 校验email是否合法实现代码

C#编程获取客户端计算机硬件及系统信息功能示例

Android中控件GridView实现设置行列分割线的方法示例

JavaScript解析JSON格式数据的方法示例

C#实现日期格式转换的公共方法类实例

Android中从图库中选取图片实例详解

winform 实现选择文件和选择文件夹对话框的简单实例

如何在R数据帧中将二进制变量转换为0/1格式？

C#构建分页应用的方法分析

mybatis同一张表多次连接查询相同列赋值问题小结

如何在R中创建虚拟变量？

Android中使用AsyncTask做下载进度条实例代码

Python调用C++程序的方法详解

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

{{msg}}

热门推荐

随机推荐