一, 使用 vuejs 搭建项目需要一些基础配置, 这样能使的编程过程事半功倍
首先下载 Node.JS, 然后使用 Node.JS 使用 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"
- }
- };
来源: https://www.cnblogs.com/wenlibest/p/11583644.html