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

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

• 百度vue cli, 进入官网

• 安装工具

• 创建项目

• 选择配置项

  1. 安装：

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

  2. 创建一个项目

    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 配置环境量

• 文件名
• 变量名
• 指定环境

1. 文件名

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

2. 变量名

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

3. 指定环境

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

1. 安装依赖

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

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

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

3. 在package.json中配置husky. hooks

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

4. 测试

❝

如果不符合规则，将无法使用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

❝

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

❞

3. 如果想在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;