最近在用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 toggle all, <i> to invert selection)Babel, TS, PWA, Router, Vuex, CSS Pre-processors, 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 package.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.vue和HelloWorld.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';@Componentexport 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新建一個項目的思路分析,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
新聞熱點
疑難解答
