Charlie

V1

2023/03/13阅读:31主题:蔷薇紫

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

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

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

  • 百度vue cli, 进入官网

  • 安装工具

  • 创建项目

  • 选择配置项

    1. 安装:
      npm install -g @vue/cli
      # OR
      yarn global add @vue/cli
    1. 创建一个项目
      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

  1. 变量名

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

  1. 指定环境

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
  1. 在工程更目录添加配置文件commitlint.config.js
echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlint.config.js
  1. 在package.json中配置husky. hooks
{
  "husky": {
    "hooks": {
      "commit-msg""commitlint -E HUSKY_GIT_PARAMS"
    }  
  }
}
#通过HUSKY_GIT_PARAMS传递参数,-E|--env用于指向相关的编辑文件。
  1. 测试

如果不符合规则,将无法使用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 = {
  roottrue,
  env: {
    nodetrue
  },
  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

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

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

分类:

前端

标签:

JavaScript

作者介绍

Charlie
V1