-
基于
vue-cli 2.x
的Vue2.x
项目模板 -
集成
vue(vuex、vue-router、axios)
-
集成
antdesign-vue
yarn add -g commitizen cz-conventional-changelog
echo '{ "path": "cz-conventional-changelog" }' > ~/.czrc
yarn add -D commitizen cz-conventional-changelog
yarn add -D husky @commitlint/cli @commitlint/config-conventional
package.json中配置
"script": {
"commit": "git-cz",
},
"config": {
"commitizen": {
"path": "node_modules/cz-conventional-changelog"
}
},
"husky": {
"hooks": {
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
}
新建.commitlintrc
module.exports = {
extends: ['@commitlint/config-conventional']
};
自动生成CHANGELOG
yarn add -D standard-version
"script": {
"release": "standard-version"
}
git add .
git cz
npm run release -- --dry-run // 检测提交日志是否正确
npm run release
git push --follow-tags origin dev
git push
修改host
config/index.js
module.exports = {
dev: {
host: '0.0.0.0'
}
}
build/webpack.base.config.js
module.exports = {
resolve: {
alias: {
'@': resolve('src')
}
}
}
-
安装vscode插件
prettier
eslint
EditorConfig for VS Code
-
安装依赖
yarn add -D prettier eslint-config-prettier eslint-plugin-prettier @vue/eslint-config-prettier
- 配置
.editorconfig
# http://editorconfig.org
root = true
# 说明
## 设置文件编码为 UTF-8;
## 用两个空格代替制表符;
## 在保存时删除尾部的空白字符;
## 在文件结尾添加一个空白行;
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
[Makefile]
indent_style = tab
- 配置
.eslintrc
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint'
},
env: {
browser: true,
},
extends: [
'standard',
'plugin:vue/essential',
'@vue/prettier',
'plugin:prettier/recommended'
],
plugins: [
'vue'
],
rules: {
'prettier/prettier': [
'error',
{
'singleQuote': true, // 单引号
'trailingComma': 'none', // 尾逗号
'semi': false, // 尾分号
},
],
'generator-star-spacing': 'off',
"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
"no-new": 'off'
},
globals: {
$CONFIG: false,
$API: false,
}
}
- 配置
.prettierrc
{
"endOfLine": "auto" ,
"printWidth": 100,
"tabWidth": 2
}
-
Tips Delete
␍
eslint(prettier/prettier)- 第一种方法:
- yarn run lint --fix
- 第二种方法:
- 配置.prettierrc文件 "endOfLine": "auto"
- 第三种方法:
- git config --global core.autocrlf false
- git全局配置之后,你需要重新拉取代码
- 第一种方法:
-
集成
prettier
// .vscode/settings.json
{
"workbench.colorTheme": "Atom One Dark",
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"workbench.iconTheme": "vscode-icons",
"vsicons.dontShowNewVersionMessage": true,
"editor.tabSize": 2,
"editor.fontWeight": "normal",
"editor.lineHeight": 24,
"diffEditor.ignoreTrimWhitespace": false,
"terminal.integrated.shell.windows": "D:\\Git\\Git\\bin\\bash.exe",
"window.zoomLevel": 0,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"explorer.confirmDragAndDrop": false,
"launch": {
"configurations": [],
"compounds": []
}
}
normalize.css
样式初始化1 (解决各浏览器初始化兼容问题)base.css
基础样式(滚动条等)
src components loading
组件src pages 404
404页面
antdesign.js
文件目录
在`src/`文件下
├─services // 请求文件
| ├─base-axiosconfig.js axios封装(请求拦截、响应拦截、错误统一处理)
| ├─base-statuscode.js request请求状态码
| ├─service-list
| | ├─service-test // 对应组件下的请求服务地址
| | └index.js // api接口的统一出口
├─static // 配置文件
依赖环境
yarn add -D axios ant-design-vue
使用
// index.html
<script src="./static/config.js"></script>
// main.js
import $API from '@/services/service-list'
Vue.prototype.$API = $API
window.$CONFIG = $CONFIG
// .vue
this.$API.getTestService({})
.then(res => { })
.catch(err => { })
.finally(() => { })
安装
yarn add -D vuex
使用
// main.js
import store from '@/store'
new Vue({
store
})
// .vue
import { mapState, mapMutations } from 'vuex'
computed: {
...mapState({
staTest: state => state.Test.staTest
})
},
methods: {
...mapMutations({
mutTest: 'Test/mutTest'
})
}
// this.staTest 取值
// this.mutTest('') 设置值
yarn add less@2.7.2 less-loader@4.1.0 sass-resources-loader -D
build/webpack.base.conf.js
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
}
build/utils
return {
less: generateLoaders('less', { javascriptEnabled: true }).concat({
loader: 'sass-resources-loader',
options: {
resources: [
path.resolve(__dirname, '../src/style/mixin.less')
]
}
}),
}
.vue
<style lang="less">
</style>
低版本兼容
yarn add babel-polyfill -D
main.js
import 'babel-polyfill';
.babelrc
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
},
"useBuiltIns": "entry"
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"]
}
antd 按需加载组件代码和样式的 babel 插件
yarn add babel-plugin-import --dev
修改.babelrc文件,配置 babel-plugin-import
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
- "plugins": ["transform-vue-jsx", "transform-runtime"]
+ "plugins": [
+ "transform-vue-jsx",
+ "transform-runtime",
+ ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }]
+ ]
}
// /build/utils.js
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
+ publicPath: '../../' // hash 打包
// publicPath: '/' // history 打包
})
}
// config/index.js
build: {
+ assetsPublicPath: './', // hash 打包
// assetsPublicPath: '/', // history 打包
}