欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-06 14:48:20
最近在用vue搭一个后台管理的单页应用的demo,因为之前只用过vue-cli2+javascript进行开发,而vue-cli3早在去年8月就已经发布,并且对于types...

最近在用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新建一个项目的思路分析,希望对大家有所帮助