@vue/cli4 项目初始化

项目使用的是 vue/cli 4.2.3 。

安装
cli使用的传送门

npm install -g @vue/cli 介于网上的使用 @vue/cli 博客非常多，这里就不做无用的输出了。

我主要说一些初始化之后的项目配置。

vue create 项目名称

根据实际需求使用，我选择的组合是

Bable + vue-router + vuex + sass(dart-sass) + ESLint + Prettier

In dedicated config files独立的存放配置文件

比较推荐使用Lint on save

项目初始化完成

首先是路由处理
路由router src/router/index.js

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue"; 

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  {
    path: "/about",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue")
  }
];

const router = new VueRouter({
  routes
});

export default router;

添加插件

我看公司有的项目是这么引入路由实现懒加载的

component: resolve => require([’…/pages/home.vue’], resolve),

我使用的是 syntax-dynamic-import, 来实现的 这个需要下载包
npm install --save-dev @babel/plugin-syntax-dynamic-import
可以看到使用的ui库是vant 都在babel.config.js配置 plugins

babel.config.js

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"], //presets脚手架生成
  plugins: [
    [
      "import",
      {
        libraryName: "vant",
        libraryDirectory: "es",
        style: true
      },
      "vant"
    ],
    "syntax-dynamic-import"
  ]
};

browserslist

 [production]
iOS >= 9
Android >= 4.2

[development]
last 2 Chrome versions

脚手架生成的.browserslistrc 配置browserslist的文件 触碰到知识盲区了 赶紧百度
官方说 用于在不同的前端工具之间共享目标浏览器和Node.js版本的配置。

EditorConfig

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
max_line_length = 0
/#/ markdown会用尾空格来表示换行，不自动移除
trim_trailing_whitespace = false

新增.editorconfig的默认配置文件，不同的人员，不同的编辑器，有不同的编码风格。
EditorConfig就是用来协同团队开发人员之间的代码的风格及样式规范化的一个工具，

EditorConfig

node_modules/*.*
/*.html
/dist/*

新增.eslintignore来指定忽略语法检查的文件以及文件夹

.nvmrc

 v10.13.0

.nvmrc 用来锁定项目使用的node版本 这里我用的是nvm来进行管理node版本。

.postcssrc.js

const plugins = {
 'postcss-import': {},
 'autoprefixer': {}
}
if (process.env.NODE_ENV === 'production') {
 plugins['postcss-pxtorem'] = {
   rootValue: 14,
   unitPrecision: 5,
   propList: ['*', '!letter-spacing', '!border-radius', '!box-shadow'],
   selectorBlackList: [],
   replace: true,
   mediaQuery: false,
   minPixelValue: 5
 }
}

module.exports = {
 plugins
}

postcss-pxtorem是PostCSS的插件，用于将像素单元生成rem单位。
这样代码里面直接写px 插件做转换rem多快乐。

.triangle {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-left: 8px solid #ffa552;
  display: inline-block;
  border-bottom: 5px solid transparent;
}

这一次要下载几个插件来完善配置
“postcss”: “^7.0.27”,
“postcss-import”: “^12.0.1”,
“autoprefixer”: “^9.7.4”,

postcss是一个用 JavaScript 工具和插件转换 CSS 代码的工具    
postcss-import插件   可以通过import 导入css
autoprefixer是一个后处理程序

public/index.html
添加移动端适配

    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <script>
      (function () {document.documentElement.style.fontSize = Math.min(640, Math.max(document.documentElement.clientWidth, 320)) / 375 * 14 + 'px'})();
    </script>

vue.config.js
新增vue.config.js文件 src同级

const path = require("path");
function resolve(dir) {
 return path.join(__dirname, dir);
}

module.exports = {
 /* 部署生产环境和开发环境下的URL：可对当前环境进行区分，baseUrl 从 Vue CLI 3.3 起已弃用，要使用publicPath */
 /* baseUrl: process.env.NODE_ENV === 'production' ? './' : '/' */
 publicPath: process.env.NODE_ENV === "production" ? "/public/" : "./",
 /* 输出文件目录：在npm run build时，生成文件的目录名称 */
 outputDir: "dist",
 /* 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 */
 assetsDir: "assets",
 /* 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度 */
 productionSourceMap: false,
 /* 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存，你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) */
 filenameHashing: false,
 /* 代码保存时进行eslint检测 */
 lintOnSave: true,
 /* webpack-dev-server 相关配置 */
 devServer: {
   /* 自动打开浏览器 */
   open: true,
   /* 设置为0.0.0.0则所有的地址均能访问 */
   host: "0.0.0.0",
   port: 8081,
   https: false,
   hotOnly: false,
   /* 使用代理 */
   proxy: {
     "/goods": {
       /* 目标代理服务器地址 */
       target: "http://127.0.0.1:8080",
       /* 允许跨域 */
       changeOrigin: true,
       pathRewrite: {
         "^/goods": "goods"
       }
     }
   }
 },
 /* 别名设置 `在这里插入代码片`*/
 chainWebpack: config => {
   config.resolve.alias
     .set("src", resolve("src"))
     .set("assets", resolve("src/assets"))
     .set("components", resolve("src/components"));
 }
};

到这里基本配置算是结束了。