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 相关文章推荐
javascript的函数
Jan 31 Javascript
在IE模态窗口中自由查看HTML源码的方法
Mar 08 Javascript
浅析document.createDocumentFragment()与js效率
Jul 08 Javascript
jQuery对指定元素中指定字符串进行替换的方法
Mar 17 Javascript
JavaScript提高性能知识点汇总
Jan 15 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
Jan 26 Javascript
Bootstrap组件(一)之菜单
May 11 Javascript
node.js 和HTML5开发本地桌面应用程序
Dec 13 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
Jan 03 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
Aug 24 Javascript
layui 富文本赋值,取值,取纯文本值的实例
Sep 18 Javascript
基于vue.js实现购物车
Jan 15 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
77A一级收信机修理记
2021/03/02 无线电
把从SQL中取出的数据转化成XMl格式
2006/10/09 PHP
php设计模式 Decorator(装饰模式)
2011/06/26 PHP
PHP字符串的递增和递减示例介绍
2014/02/11 PHP
深入理解PHP中的Streams工具
2015/07/03 PHP
Whatever:hover 无需javascript让IE支持丰富伪类
2010/06/29 Javascript
Node.js中的事件驱动编程详解
2014/08/16 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
jQuery实现跨域
2015/02/03 Javascript
使用Node.js配合Nginx实现高负载网络
2015/06/28 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
2016/01/14 Javascript
vue根据值给予不同class的实例
2018/09/29 Javascript
nodejs各种姿势断点调试的方法
2020/06/18 NodeJs
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python smtplib模块发送SSL/TLS安全邮件实例
2015/04/08 Python
vscode 远程调试python的方法
2017/12/01 Python
python爬虫获取京东手机图片的图文教程
2017/12/29 Python
利用Python如何生成便签图片详解
2018/07/09 Python
python 获取url中的参数列表实例
2018/12/18 Python
浅谈pandas筛选出表中满足另一个表所有条件的数据方法
2019/02/08 Python
python自动循环定时开关机(非重启)测试
2019/08/26 Python
python编写猜数字小游戏
2019/10/06 Python
python 调整图片亮度的示例
2020/12/03 Python
基于Python的接口自动化读写excel文件的方法
2021/01/15 Python
CSS Grid布局教程之什么是网格布局
2014/12/30 HTML / CSS
巴西男士个人护理产品商店:SHOP4MEN
2017/08/07 全球购物
美国Jeep配件购物网站:Morris 4×4 Center
2019/05/01 全球购物
Fnac西班牙官网:法国文化和电子产品零售商
2021/03/14 全球购物
体育学院毕业生自荐信
2013/11/03 职场文书
大学校园生活自我鉴定
2014/01/13 职场文书
幼儿园元旦亲子活动方案
2014/02/17 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python
Python数据分析之绘图和可视化详解
2021/06/02 Python
Redis 中使用 list,streams,pub/sub 几种方式实现消息队列的问题
2022/03/16 Redis