vue-cli3+typescript新建一個項目的思路分析
最近在用vue搭一個后臺管理的單頁應用的demo,因為之前只用過vue-cli2+javascript
進行開發(fā),而vue-cli3早在去年8月就已經(jīng)發(fā)布,并且對于typescript有了很好地支持。所以為了熟悉新技術,我選擇使用vue-cli3+typescript
進行新應用的開發(fā)。這里是新技術的學習記錄。
初始化項目
卸載老版本腳手架,安裝新版本腳手架后,開始初始化項目。初始化的命令跟2.x版本的略有不同,以前是 vue init webpack project-name
,而現(xiàn)在是 vue create project-name
。vue-cli3已經(jīng)完全把webpack綁定了,這也就意味著無法像以前那樣選擇別的打包工具比如webpack-simple
。如果一定要用webpack-simple
,可以額外安裝 @vue/cli-init
,可以在不卸載cli3的情況下使用init命令進行初始化。輸入create命令后,可以選擇初始配置。為了學習,我選擇自定義,并把所有可選內(nèi)容都勾選上。其余配置項基本就按默認的來,最終的配置情況如下。
? 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都變成了單獨的文件,而不是以前的文件夾,當然如果有需要的話可以自己建這兩個文件夾。
最大的區(qū)別在于webpack配置都被隱藏起來了,默認沒有了那些config文件,現(xiàn)在如果需要修改webpack配置項,可以在根目錄新建一個 vue.config.js進行配置。這種的配制方法在2.x版本也可以用,內(nèi)容也跟之前的類似。
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'; @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 部分跟之前的并沒有區(qū)別, template 部分的自定義組件變成了單標簽的寫法。最大的變化在于 script 部分。vue-cli3加入了更加流行的class寫法,并且引入了許多面向對象語言(比如python)都有的裝飾器。
裝飾器其實是一個返回函數(shù)的高階函數(shù),接受一個函數(shù)對象作為參數(shù),返回一個函數(shù)并賦值給原對象,它的作用主要是減少代碼量?,F(xiàn)在可以把組件的name和引用的別的component
加到 @Component 后面,像Home.vue中那樣。其他的方法和屬性,可以直接寫到class里面。因為是class的寫法,所以也不需要 data(){return}
,可以直接寫屬性和方法。在寫的時候,注意還有些地方會用到裝飾器,常見的有 @Prop @Watch @Emit ,都需要單獨引用。Prop在HelloWorld.vue中就有例子。Watch的使用如下
@Watch("page") onPageChanged(newValue: number) { //doSomething }
watch的對象是個字符串,后面跟著的就是watch的操作。這里的函數(shù)名并沒有任何意義,只要不重復即可。
Emit的用法如下
@Emit('msg') dosomething() { }
另外計算屬性的寫法也有所不同,不再需要computed關鍵字,而是直接用get寫法
get route() { return this.$route; }
至于生命周期鉤子,則跟原來的都差不多。只不過寫的時候,要注意typescript語法。在對象聲明的時候,要加上 msg : string 類型標識。在有一些對象引用的地方,對于一些未知類型的引用,可以加上 (msg as any) 的標識。不加這些的話,會有錯誤提醒,但是不影響運行。
測試
todo
總結
以上所述是小編給大家介紹的vue-cli3+typescript新建一個項目的思路分析,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!
相關文章
vuejs+element UI點擊編輯表格某一行時獲取內(nèi)容填入表單的示例
這篇文章主要介紹了vuejs+element UI點擊編輯表格某一行時獲取內(nèi)容填入表單的示例,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-10-10Vue實現(xiàn)Tab標簽路由效果并用Animate.css做轉場動畫效果的代碼
這篇文章主要介紹了Vue實現(xiàn)Tab標簽路由效果,并用Animate.css做轉場動畫效果,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07