Vue-cli3.0專案建立
簡介
之前寫過一篇文章Vue-cli專案建立,主要是針對Vue-cli3.0版本之前的，由於現在Vue-cli版本更新到了3.0，而且建立專案的一些情況也發生了變化，所以本篇將在基於Vue-cli3.0以上版本建立專案，大家可以參考一下Vue-cli2.0版本（這裡的Vue-cli3.0版本之前統稱為2.0版本）和Vue-cli3.0版本的不同之處，不要混淆了。
大家也可以進入Vue-cli3官網進行檢視相關資訊。
安裝
說明
這裡不介紹Vue-cli3.0專案所需的Node.js那些安裝了，但是Node.js版本必須是8.9 或更高版本(推薦 8.11.0+)，大家還不清楚的話就去檢視我之前寫的文章Vue-cli專案建立
Vue-CLI:
- 通過
@vue/cli搭建互動式的專案腳手架。 - 通過
@vue/cli + @vue/cli-service-global快速開始零配置原型開發。 - 一個執行時依賴
(@vue/cli-service)，該依賴：- 可升級；
- 基於
webpack構建，並帶有合理的預設配置； - 可以通過專案內的配置檔案進行配置；
- 可以通過外掛進行擴充套件。
- 一個豐富的官方外掛集合，集成了前端生態中最好的工具。
- 一套完全圖形化的建立和管理
Vue.js專案的使用者介面
進入安裝
安裝Vue-cli3.0專案的命令的一些改變記錄一下。開啟Git Bash Here
- npm安裝Vue-cli3.0或者cnpm安裝Vue-cli3.0
yarn官方文件使用在這裡，大家可以去試試
yarn的使用
$ npm install -g @vue/cli # -g或者global 表示全域性安裝
#或者
$ cnpm install -g @vue/cli
#或者
$ yarn global add @vue/cli # 必須先安裝yarn
而之前的Vue-cli2.0是這樣的
$ cnpm install --global vue-cli
安裝完成之後檢視版本資訊
$ vue --version
基礎
Vue-cli3.0進行單個原型開發
1.安裝cli-service-global
$ npm install -g @vue/cli-service-global
#或者
$ cnpm install -g @vue/cli-service-global
2.必備有一個.vue檔案，而且符合Vue模板樣式就可以如下App.vue
<template>
<h1>Hello! Welcome Leaning Vue-cli3.0</h1>
</template>
3.在App.vue這個目錄中執行vue serve
$ vue serve
- 注：
vue serve使用了和vue create建立的專案相同的預設設定 (webpack、Babel、PostCSS 和 ESLint)。它會在當前目錄自動推匯入口檔案——入口可以是main.js、index.js、App.vue 或 app.vue中的一個,也就是說如果你建立的.vue檔案是Hello.vue的話，那麼你執行的應該是這樣的
$ vue server Hello.vue # 必須要指定哪個.vue檔案
4.vue build 該檔案,同樣的情況，預設入口檔案的main.js、index.js、App.vue 或 app.vue
$ vue build
如果不是則
$ vue build Hello.vue
建立專案
在Vue-cli 2建立專案是這樣的
$ vue init webpack vuefirstdemo #這是基於webpack
而Vue-cli3的用法是create [options] <app-name>
$ vue create helloworld
提示選取一個 preset。你可以選預設的包含了基本的Babel + ESLint 設定的 preset，可以手動選擇，或者預設即可。
建立完成後，直接執行
$ cd helloworld
$ npm run serve
打包上線
$ npm run build
檢視專案結構
- 專案結構註解：
|—node-modules：依賴的node庫檔案
|—public：公共檔案，如index.html入口檔案
|—src
|—assets：資原始檔img、css、html等等
|—component：元件
|—App.vue：vue的根元件
|—main.js：主函式入口檔案
|—package.json：專案描述檔案
你也可以通過圖形化介面管理和建立專案
$ vue ui
- 注：如果想恢復使用
Vue-cli2.x的話可以這麼來操作
$ npm install -g @vue/cli-init
# `vue init` 的執行效果將會跟 `[email protected]` 相同
$ vue init webpack my-project
總結
好了，這裡就完成了Vue-cli3的專案建立了，在IDEA開發工具建立，將會在下篇文章講解，大家需要注意的是建立命名的改變了，其他專案結構沒有多大的變化。
在前面我所講的Vue-cli2專案建立大家可以去檢視一下,總結他們的區別。