Charlie
V1
2023/03/13阅读:31主题:蔷薇紫
如何从头开始构建一个项目
如何从头开始构建一个项目
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 featuresCheck 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 TestingUse history mode for router? (Requires proper server setup for index fallback
in production) (Y/n) YPick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported
by default):
Sass/SCSS (with dart-sass)
❯ Sass/SCSS (with node-sass)
Less
StylusPick a linter / formatter config:
ESLint with error prevention only
ESLint + Airbnb config
❯ ESLint + Standard config
ESLint + PrettierPick additional lint features:
❯◯ Lint on save
◉ Lint and fix on commitWhere do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
In package.jsonWhere 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;
作者介绍
Charlie
V1