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專案建立大家可以去檢視一下,總結他們的區別。