Vue基础项目配置

Posted 2022-12-02 wenlibest

一，使用Vuejs搭建项目需要一些基础配置，这样能使的编程过程事半功倍

1. 首先下载nodejs，然后使用nodejs使用NPM命令下载VueCli3.0以上的Vue脚手架。通过脚手架可以使用Vue ui图形界面创建项目，也可以使用vue create xxx来使用命令行来创建项目。
2. 创建项目之时最重要的选项就是使用配置文件最好各个配置文件分开，不要集中在<vue.confing.js>。
3. 创建完项目之后启动项目npm run serve.
4. 在项目目录打开一个新的命令提示行来安装Vue的插件和各种loader。

二、各种loader，不知道loader的请自行Google

1. file-loader，这个包必须安装他可以加载比如svg、image等文件，直接安装无需配置，安装命令npm install file-loader -D
2. 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();
     

3. normalize.css ，消除各个浏览器的默认值，直接使用npm install  normalize.css 安装，在main.js中import导入即可
4. js-cookie，简单使用cookie，提供各种操作cookie的操作，直接使用npm install js-cookie
5. autoprefixer 给各个不同的浏览器添加前缀，以适用不同的浏览器的一些css规则，在<.browserslistrc>配置文件中更改配置，具体配置参见github。
6. 有时候路径嵌套比较深看起来比较懵。可以配置文件路径的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")
         
       
     

7. 配置完webpack之后可以使用vue inspect --rule xxx 来检查配置是否正确，配置正确之后重新启动项目

三、配置ESlint，配置好之后可以自动纠正编写问题，使代码优美好看

1. 在创建vue项目的时候需要选择是否使用Eslint来纠正代码错误，一定要选择在保存使纠正。当然后期也可以在配置文件中更改
2. 在创建vue项目的时候也要选择Eslin的纠正使用的模板，建议使用<prettier>，如果没有可以使用npm install  prettier -D
3. 安装 eslint-plugin-html 不用配置，npm install eslint-plugin-html -D
4. 文件->首选项->配置->插件，找到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,

5. 在<.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"
     
   ;