Vue基礎專案配置
阿新 • • 發佈：2019-09-25
一，使用Vuejs搭建專案需要一些基礎配置，這樣能使的程式設計過程事半功倍
- 首先下載nodejs，然後使用nodejs使用NPM命令下載VueCli3.0以上的Vue腳手架。通過腳手架可以使用Vue ui圖形介面建立專案，也可以使用vue create xxx來使用命令列來建立專案。
- 建立專案之時最重要的選項就是使用配置檔案最好各個配置檔案分開，不要集中在<vue.confing.js>。
- 建立完專案之後啟動專案npm run serve.
- 在專案目錄開啟一個新的命令提示行來安裝Vue的外掛和各種loader。
二、各種loader，不知道loader的請自行Google
- file-loader，這個包必須安裝他可以載入比如svg、image等檔案，直接安裝無需配置，安裝命令npm install file-loader -D
- svg-sprite-loader，這個安裝包用來高效率的使用icon圖示，這個需要配置，安裝命令npm install svg-sprite-loader -D，首先在根目錄下新建配置檔案vue.config.js。然後配置如下：
const path = require("path");
chainWebpack: config => { config.module .rule("svg") .exclude.add(path.resolve("./src/icons")) .end(); config.module .rule("icons") .test(/\.svg$/) .include.add(path.resolve("./src/icons")) .end() .use("svg-sprite-loader") .loader("svg-sprite-loader") .options({ symbolId: "icon-[name]" }) .end(); } - normalize.css ，消除各個瀏覽器的預設值，直接使用npm install normalize.css 安裝，在main.js中import匯入即可
- js-cookie，簡單使用cookie，提供各種操作cookie的操作，直接使用npm install js-cookie
- autoprefixer 給各個不同的瀏覽器新增字首，以適用不同的瀏覽器的一些css規則，在<.browserslistrc>配置檔案中更改配置，具體配置參見github。
- 有時候路徑巢狀比較深看起來比較懵。可以配置檔案路徑的alias，這樣的話看起來就簡潔明瞭，具體配置在<vue.config.js>中配置，然後使用時候只需這樣使用就行，比如：import api from "api/login"
configureWebpack: { resolve: { alias: { view: path.resolve("./src/views"), comp: path.resolve("./src/components"), api: path.resolve("./src/api"), layer: path.resolve("./src/layers"), icon: path.resolve("./src/icons") } } } - 配置完webpack之後可以使用vue inspect --rule xxx 來檢查配置是否正確，配置正確之後重新啟動專案
三、配置ESlint，配置好之後可以自動糾正編寫問題，使程式碼優美好看
- 在建立vue專案的時候需要選擇是否使用Eslint來糾正程式碼錯誤，一定要選擇在儲存使糾正。當然後期也可以在配置檔案中更改
- 在建立vue專案的時候也要選擇Eslin的糾正使用的模板，建議使用<prettier>，如果沒有可以使用npm install prettier -D
- 安裝 eslint-plugin-html 不用配置，npm install eslint-plugin-html -D
- 檔案->首選項->配置->外掛，找到Eslint，右上角開啟配置(json)，配置如下程式碼：
"eslint.validate": [ "javascript", "javascriptreact", "html", {"language": "vue","autoFix": true} ], "eslint.options": { "plugins":["html","vue"] }, "files.autoSave": "off", "extensions.autoUpdate": false, "eslint.autoFixOnSave": true, "eslint.alwaysShowStatus": true, "eslint.lintTask.enable": true, "eslint.experimental.incrementalSync": true, "editor.tabSize": 2, - 在<.eslintrc.js>中配置如下：
module.exports = { root: true, env: { node: true }, extends: ["plugin:vue/essential", "@vue/prettier"], rules: { "no-console": process.env.NODE_ENV === "production" ? "error" : "off", "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off" }, parserOptions: { parser: "babel-eslint" } };