Vue CLI 3 安裝、建立、配置、安裝外掛
一、安裝
1、全域性安裝過舊版本的 vue-cli(1.x 或 2.x)要先解除安裝它:
npm uninstall vue-cli -g //或者 yarn global remove vue-cli
注意:如果解除安裝不了(我解除安裝2.9.6,還剩下一個2.9.3版本一直解除安裝不了),就直接安裝vue cli3,包直接安裝就能覆蓋掉
2.安裝 vue cli3
npm install -g @vue/cli
官方建議,node.js的版本,需要是8.9或者以上(推薦是8.11.0+)
二、建立專案
1.找到安裝專案的地址:cd E:\ylz_project\my_vuedemo
2.安裝
vue create demo-vue3(demo-vue3 自定義專案名)
3.配置
①我選了第二個,手動選擇需要的manually select features
②選擇配置,看個人專案需求
注意,空格鍵是選中與取消,A鍵是全選
TypeScript 支援使用 TypeScript 書寫原始碼
Progressive Web App (PWA) Support PWA 支援。
Router 支援 vue-router 。
Vuex 支援 vuex 。
CSS Pre-processors 支援 CSS 前處理器。
Linter / Formatter 支援程式碼風格檢查和格式化。
Unit Testing 支援單元測試。
E2E Testing 支援 E2E 測試。
③是否使用history路由:y
④選擇css處理器:sass/scss
⑤ 程式碼風格和eslint :選中ESLint + Standard config
⑥何時檢測 : Lint on save
⑦選擇lint的配置檔案如何存放(第一個是獨立資料夾位置,第二個是在package.json檔案裡):In dedicated config files
⑧是否儲存本次建立專案的配置項,用於下次快速建立專案 :y
⑨回車確定等待下載
4.執行專案
cd demo-vue3 // 進入到專案根目錄
npm run serve // 啟動專案
三.配置
在根目錄 建立vue.config.js(與src同級)
如:
module.exports = {
baseUrl: '', // 基本路徑
devServer: {
port: 8080,//埠號
open: true, //配置自動啟動瀏覽器
proxy: 'http://localhost:4000' // 配置跨域處理,只有一個代理
}
}
四.安裝外掛
vue create 來建立一個新專案的時候,則用vue add vuex(vuex外掛名)
1.安裝iview UI
執行命令vue add vue-cli-plugin-iview
選按需載入:Import on demand 選zh-CN
vue-cli-plugin-iview會自動幫我們做好以下的檔案的配置:
1.babel.config.js
module.exports = {
presets: [
'@vue/app'
],
"plugins": [
[
"import",
{
"libraryName": "iview",
"libraryDirectory": "src/components"
}
],
[
"import",
{
"libraryName": "iview",
"libraryDirectory": "src/components"
}
]
]
}
2.package.json
"babel-plugin-import": "^1.8.0",
3.在目錄下新增了plugin檔案下有個iview.js
import Vue from 'vue'
import { Button } from 'iview'
Vue.component('Button', Button)
import 'iview/dist/styles/iview.css'
4.main.ts
import './plugins/iview.js'