Vue基礎項目配置
- 2019 年 10 月 3 日
- 筆記
一，使用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" } };
