這篇文章主要介紹了vue-cli3+typescript如何新建一個(gè)項(xiàng)目，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)公司專(zhuān)注于宿豫網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供宿豫營(yíng)銷(xiāo)型網(wǎng)站建設(shè)，宿豫網(wǎng)站制作、宿豫網(wǎng)頁(yè)設(shè)計(jì)、宿豫網(wǎng)站官網(wǎng)定制、成都小程序開(kāi)發(fā)服務(wù)，打造宿豫網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供宿豫網(wǎng)站排名全網(wǎng)營(yíng)銷(xiāo)落地服務(wù)。

初始化項(xiàng)目

卸載老版本腳手架，安裝新版本腳手架后，開(kāi)始初始化項(xiàng)目。初始化的命令跟2.x版本的略有不同，以前是 vue init webpack project-name ，而現(xiàn)在是 vue create project-name 。vue-cli3已經(jīng)完全把webpack綁定了，這也就意味著無(wú)法像以前那樣選擇別的打包工具比如webpack-simple。如果一定要用webpack-simple，可以額外安裝 @vue/cli-init ，可以在不卸載cli3的情況下使用init命令進(jìn)行初始化。輸入create命令后，可以選擇初始配置。為了學(xué)習(xí)，我選擇自定義，并把所有可選內(nèi)容都勾選上。其余配置項(xiàng)基本就按默認(rèn)的來(lái)，最終的配置情況如下。

? Please pick a preset: Manually select features
? Check the features needed for your project: (Press  to select,  to t
oggle all,  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  to select,  to toggle all,  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

然后需要一點(diǎn)時(shí)間來(lái)下載npm包，初始化完成后，看一下工程目錄，可以看到跟vue-cli2的還是有很多不一樣的地方。router和store都變成了單獨(dú)的文件，而不是以前的文件夾，當(dāng)然如果有需要的話(huà)可以自己建這兩個(gè)文件夾。

最大的區(qū)別在于webpack配置都被隱藏起來(lái)了，默認(rèn)沒(méi)有了那些config文件，現(xiàn)在如果需要修改webpack配置項(xiàng)，可以在根目錄新建一個(gè) vue.config.js進(jìn)行配置。這種的配制方法在2.x版本也可以用，內(nèi)容也跟之前的類(lèi)似。

module.exports = {
 baseUrl: '/',
 devServer: {
  before: app => {
  },
  proxy: {
   '/api': {
    target: 'http://api.com',
    changeOrigin: true
   }
  }
 },
 configureWebpack: {
  resolve: {
   alias: {
    'coms': '@/components'
   }
  }
 }
}

vue組件

項(xiàng)目初始化后的Home.vue和HelloWorld.vue很好地舉例說(shuō)明了新的寫(xiě)法。

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 {}




import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class HelloWorld extends Vue {
 @Prop() private msg!: string;
}

style 部分跟之前的并沒(méi)有區(qū)別， template 部分的自定義組件變成了單標(biāo)簽的寫(xiě)法。最大的變化在于 script 部分。vue-cli3加入了更加流行的class寫(xiě)法，并且引入了許多面向?qū)ο笳Z(yǔ)言（比如python）都有的裝飾器。

裝飾器其實(shí)是一個(gè)返回函數(shù)的高階函數(shù)，接受一個(gè)函數(shù)對(duì)象作為參數(shù)，返回一個(gè)函數(shù)并賦值給原對(duì)象，它的作用主要是減少代碼量。現(xiàn)在可以把組件的name和引用的別的component加到 @Component 后面，像Home.vue中那樣。其他的方法和屬性，可以直接寫(xiě)到class里面。因?yàn)槭莄lass的寫(xiě)法，所以也不需要 data(){return} ，可以直接寫(xiě)屬性和方法。在寫(xiě)的時(shí)候，注意還有些地方會(huì)用到裝飾器，常見(jiàn)的有 @Prop @Watch @Emit ，都需要單獨(dú)引用。Prop在HelloWorld.vue中就有例子。Watch的使用如下

@Watch("page")
 onPageChanged(newValue: number) {
  //doSomething
 }

watch的對(duì)象是個(gè)字符串，后面跟著的就是watch的操作。這里的函數(shù)名并沒(méi)有任何意義，只要不重復(fù)即可。

Emit的用法如下

@Emit('msg')
 dosomething() {
 }

另外計(jì)算屬性的寫(xiě)法也有所不同，不再需要computed關(guān)鍵字，而是直接用get寫(xiě)法

get route() {
  return this.$route;
 }

至于生命周期鉤子，則跟原來(lái)的都差不多。只不過(guò)寫(xiě)的時(shí)候，要注意typescript語(yǔ)法。在對(duì)象聲明的時(shí)候，要加上 msg : string 類(lèi)型標(biāo)識(shí)。在有一些對(duì)象引用的地方，對(duì)于一些未知類(lèi)型的引用，可以加上 (msg as any) 的標(biāo)識(shí)。不加這些的話(huà)，會(huì)有錯(cuò)誤提醒，但是不影響運(yùn)行。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vue-cli3+typescript如何新建一個(gè)項(xiàng)目”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!