- 卸載與安裝
//卸載vue-cli2
npm uninstall vue-cli -g
//安裝vue-cli3
npm install -g @vue/cli
2.新建項目
執(zhí)行以下代碼菱皆，新建項目：
vue create xxx
接下來會讓你選擇
image.png
我們選擇
Manually select features屋剑，自己手動配置，然后回車安裝插件
image.png
按照上圖進(jìn)行選擇在跳，然后回車鸯檬，接下來我們可以根據(jù)自己的需求來選擇
image.png
選好之后回車，項目就創(chuàng)建好了词渤。
然后牵舱，把src直接復(fù)制過來替換。
在現(xiàn)有的項目中安裝插件
每個 CLI 插件都會包含一個 (用來創(chuàng)建文件的) 生成器和一個 (用來調(diào)整 webpack 核心配置和注入命令的) 運行時插件缺虐。當(dāng)你使用 vue create 來創(chuàng)建一個新項目的時候芜壁，有些插件會根據(jù)你選擇的特性被預(yù)安裝好。如果你想在一個已經(jīng)被創(chuàng)建好的項目中安裝一個插件，可以使用 vue add 命令：
vue add element
vue add i18n
vue add rx
安裝好之后慧妄，在根目錄下添加vue.config.js,我的配置如下：
const path = require('path')
function resolve (dir) {
return path.join(__dirname,dir)
}
module.exports = {
//開發(fā)服務(wù)配置
devServer: {
port: 8888, // 端口號
// host: 'localhost', // 主機(jī)
https: false, // 是否啟用https
open: false // 配置是否自動啟動瀏覽器
},
css: {
loaderOptions: {
sass: {
data: `@import "~@/assets/scss/custom-theme-var.scss";`//添加全局sass文件
}
}
},
chainWebpack: (config) => {
// 鏈?zhǔn)脚渲?
},
pluginOptions: {
i18n: {
locale: 'zh-TW',
localeCn: 'zh-CN',
fallbackLocale: 'en-US',
localeDir: 'assets/locales',
enableInSFC: false
}
},
lintOnSave : true
}
tslint 規(guī)則配置,tslint.json
{
"defaultSeverity": "warning",
"extends": [
"tslint:recommended"
],
"linterOptions": {
"exclude": [
"node_modules/**"
]
},
"rules": {
"quotemark": false, // 字符串文字需要單引號或雙引號顷牌。
"indent": false, // 使用制表符或空格強(qiáng)制縮進(jìn)。
"member-access": false, // 需要類成員的顯式可見性聲明塞淹。
"interface-name": false, // 接口名要求大寫開頭
"ordered-imports": false, // 要求將import語句按字母順序排列并進(jìn)行分組窟蓝。
"object-literal-sort-keys": false, // 檢查對象文字中鍵的排序。
"no-consecutive-blank-lines": false, // 不允許連續(xù)出現(xiàn)一個或多個空行饱普。
"no-shadowed-variable": false, // 不允許隱藏變量聲明运挫。
"no-trailing-whitespace": false, // 不允許在行尾添加尾隨空格。
"semicolon": false, // 是否分號結(jié)尾
"trailing-comma": false, // 是否強(qiáng)象添加逗號
"eofline": false, // 是否末尾另起一行
"prefer-conditional-expression": false, // for (... in ...)語句必須用if語句過濾
"curly": true, //for if do while 要有括號
"forin": false, //用for in 必須用if進(jìn)行過濾
"import-blacklist": true, //允許使用import require導(dǎo)入具體的模塊
"no-arg": true, //不允許使用 argument.callee
"no-bitwise": true, //不允許使用按位運算符
"no-console": false, //不能使用console
"no-construct": true, //不允許使用 String/Number/Boolean的構(gòu)造函數(shù)
"no-debugger": true, //不允許使用debugger
"no-duplicate-super": true, //構(gòu)造函數(shù)兩次用super會發(fā)出警告
"no-empty": true, //不允許空的塊
"no-eval": true, //不允許使用eval
"no-floating-promises": false, //必須正確處理promise的返回函數(shù)
"no-for-in-array": false, //不允許使用for in 遍歷數(shù)組
"no-implicit-dependencies": false, //不允許在項目的package.json中導(dǎo)入未列為依賴項的模塊
"no-inferred-empty-object-type": false, //不允許在函數(shù)和構(gòu)造函數(shù)中使用{}的類型推斷
"no-invalid-template-strings": true, //警告在非模板字符中使用${
"no-invalid-this": true, //不允許在非class中使用 this關(guān)鍵字
"no-misused-new": true, //禁止定義構(gòu)造函數(shù)或new class
"no-null-keyword": false, //不允許使用null關(guān)鍵字
"no-object-literal-type-assertion": false, //禁止object出現(xiàn)在類型斷言表達(dá)式中
"no-return-await": true, //不允許return await
"arrow-parens": false, //箭頭函數(shù)定義的參數(shù)需要括號
"adjacent-overload-signatures": false, // Enforces function overloads to be consecutive.
"ban-comma-operator": true, //禁止逗號運算符套耕。
"no-any": false, //不需使用any類型
"no-empty-interface": true, //禁止空接口 {}
"no-internal-module": true, //不允許內(nèi)部模塊
"no-magic-numbers": false, //不允許在變量賦值之外使用常量數(shù)值谁帕。當(dāng)沒有指定允許值列表時，默認(rèn)允許-1,0和1
"no-namespace": [true, "allpw-declarations"], //不允許使用內(nèi)部modules和命名空間
"no-non-null-assertion": true, //不允許使用!后綴操作符的非空斷言冯袍。
"no-parameter-reassignment": true, //不允許重新分配參數(shù)
"no-reference": true, // 禁止使用/// <reference path=> 導(dǎo)入 匈挖，使用import代替
"no-unnecessary-type-assertion": false, //如果類型斷言沒有改變表達(dá)式的類型就發(fā)出警告
"no-var-requires": false, //不允許使用var module = require("module"),用 import foo = require('foo')導(dǎo)入
"prefer-for-of": true, //建議使用for(..of)
"promise-function-async": false, //要求異步函數(shù)返回promise
"max-classes-per-file": [true, 2], // 一個腳本最多幾個申明類
"variable-name": false,
"prefer-const": false, // 提示可以用const的地方
"whitespace":false,
"comment-format":false,
"align":false,
"max-line-length":[true, 200]
}
}
項目地址：
vue2.x：https://github.com/momoSph/Vue2.x-ElementUI
vue3.x：https://github.com/momoSph/Vue3.x-ElementUI
