如何从头开始构建一个项目

1 利用cli构建出一个大体框架

百度vue cli, 进入官网
安装工具
创建项目

选择配置项

安装：

  npm install -g @vue/cli
  # OR
  yarn global add @vue/cli

创建一个项目

  vue create my-project
  # OR
  vue ui

❝
上下按键可以切换, 空格键可以选中与否, 回车下一步
❞

  Vue CLI v4.5.6
┌──────────────────────────────────────────┐
│                                          │
│   New version available 4.5.6 → 4.5.13   │
│     Run npm i -g @vue/cli to update!     │
│                                          │
└──────────────────────────────────────────┘

? Please pick a preset: (Use arrow keys)
❯ presets ([Vue 2] node-sass, babel, pwa, router, vuex) 
  Default ([Vue 2] babel, eslint) 
  Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
  Manually select features

Check the features needed for your project: 
 ◉ Choose Vue version
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
 ◉ CSS Pre-processors
❯◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

Use history mode for router? (Requires proper server setup for index fallback 
in production) (Y/n) Y

  Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
  by default): 
  Sass/SCSS (with dart-sass) 
❯ Sass/SCSS (with node-sass) 
  Less 
  Stylus

  Pick a linter / formatter config: 
  ESLint with error prevention only 
  ESLint + Airbnb config 
❯ ESLint + Standard config 
  ESLint + Prettier

Pick additional lint features: 
❯◯ Lint on save
 ◉ Lint and fix on commit

  Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files 
  In package.json

Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) N

2 配置环境量

文件名
变量名
指定环境

文件名

.env.development .env.test .env.pre .env.prod

变量名

VUE_APP_NODE_ENV=development VUE_APP_baseUrl=https://mapi.test.bestpay.net/mapi/

指定环境

package.json

{
  "scripts": {
    "build:46": "vue-cli-service build --mode 46",
    "build:pre": "vue-cli-service build --mode pre",
    "build:prod": "vue-cli-service build --mode prod",
    "build:test": "vue-cli-service build --mode test",
    "dev": "vue-cli-service serve"
  }
}

3 添加commitlint

安装依赖

npm install --save-dev @commitlint/{cli,config-conventional}@12.0.1 @commitlint/cli@12.0.1 husky@4.3.0 

#注意. Existing hooks are kept. Requires Node >= 10 and Git >= 2.13.0

在工程更目录添加配置文件commitlint.config.js

echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlint.config.js

在package.json中配置husky. hooks

{
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }  
  }
}
#通过HUSKY_GIT_PARAMS传递参数，-E|--env用于指向相关的编辑文件。

测试

❝
如果不符合规则，将无法使用git进行commit，比如下面的，如果想知道有什么规则，可以参考这个 git规范。
❞

git commit -m "foo: this will fail"
husky > npm run -s commitmsg
⧗   input: foo: this will fail
✖   type must be one of [build, chore, ci, docs, feat, fix, perf, refactor, revert, style, test] [type-enum]
✖   found 1 problems, 0 warnings
husky > commit-msg hook failed (add --no-verify to bypass)
git commit -m "chore: lint on commitmsg"
husky > npm run -s commitmsg
⧗   input: chore: lint on commitmsg
✔   found 0 problems, 0 warnings

配置eslint

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
  parserOptions: {
    parser: "babel-eslint"
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-async-promise-executor": "off",
    "no-undef": "off"
  }
};

.eslintignore

src/api/request.js
src/config/fiveGChannel.js
src/filter.js
src/nav.config.json
src/pages/activityRule.vue
src/pages/bBagTransferPage.vue

❝
忽略什么文件就把目录和文件名添加上
❞

如果想在commit时对不符合eslint的代码进行拦截 package.json

  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,vue}": [
      "vue-cli-service lint",
      "git add"
    ]
  }

vue.config.js

const path = require('path');

module.exports = {
  publicPath: './',
  filenameHashing: true,
  lintOnSave: true,
  productionSourceMap: false,
  // webpack配置 - 简单配置方式
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'),
      },
    },
  },
  css: {
    requireModuleExtension: true,
    extract: process.env.VUE_APP_NODE_ENV !== 'development', // 开发模式不提取css
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue: 75, // 页面html根节点设置的fz的大小
            propList: ['*'], // 匹配到的标签
            exclude: /node_modules/i,
          }),
        ],
      },
    },
  },
}

babel.config.js

const config = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
    [
      "import",
      {
        libraryName: "vant",
        libraryDirectory: "es",
        style: true
      },
      "vant"
    ]
  ]
};

if (process.env.VUE_APP_NODE_ENV !== "development") {
  config.plugins.push("transform-remove-console");
}

module.exports = config;