安装脚手架
- npm install -g @vue/cli 或者 yarn global add @vue/cli
- vue --version 查看版本
创建项目
- vue create vue-template-h5
- cd vue-template-h5
- npm run serve
- 清理不需要的文件
加入tabbar代码
引入组件，或者自己写，GitHub上也有很多模板， 本例子是根据codeWhy B站的例子写的
scss
- npm install node-sass sass-loader
引入基础样式，全局样式
- @import "./normalize.css";
上传GitHub
-
地址 github.com/WeiaiKing/v… 当创建在GitHub创建了仓库，但是本地上传到github失败 因为可以是readme文件或者其他冲突了，需要强制拉取代码，然后在合并
-
git remote add origin 地址
-
git pull --rebase origin master
-
git push -u origin master
eslint 检查和修改
{
"window.zoomLevel": 0.4, // 窗口缩放倍数
"files.autoSave": "afterDelay", // 立即自动保存文件。有时会导致代码自动保存时无法正确格式化
"editor.fontSize": 16, // 字体大小
"editor.tabSize": 2, // 设定tabsize缩进的空格，editor.detectIndentation启用时会覆盖该设置
// "http.proxyAuthorization": "false", // 关闭一些代理引发的警告
/********************************* ESLint 插件 *********************************/
"eslint.validate": [
"javascript",
"javascriptreact",
"vue",
"html"
], // 配置 ESLint 检查的文件类型
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}, // 保存时按照eslint的规则格式化
"editor.formatOnSave": true, // 保存时自动格式化代码。可以实现保存时自动格式化style代码
/********************************* vetur 插件 *********************************/
"vetur.format.defaultFormatterOptions": {
"prettier": {
"semi": false, //不加分号
"singleQuote": true, //用单引号
"trailingComma": "none" // 不使用拖尾逗号
} // 重写prettier配置，与eslint保持一致
},
/********************************* prettier 插件 *********************************/
/* vetur的代码格式化就是使用prettier,因此选择不安装prettier */
// "prettier.singleQuote": true, // 使用单引号（和eslint规则一致，否则会发生冲突）
// "prettier.semi": false, // 末尾不使用分号（和eslint规则一致，否则会发生冲突）
// "prettier.trailingComma": "none", // 不使用拖尾逗号（和eslint规则一致，否则会发生冲突）
// "prettier.ignorePath": ".prettierignore", // prettier忽略的文件，需在根目录新增.prettierignore文件
/********************************* KoroFileHeader 插件 *********************************/
"fileheader.customMade": {
"Descriptin": "",
"Version": "0.1",
"Autor": "Your Name",
"Date": "Do not edit",
"LastEditors": "Your Name",
"LastEditTime": "Do not edit"
}, // 文件头部注释
"fileheader.cursorMode": {
"descripton": "",
"param": "",
"return": "",
"author": "Your Name"
} // 函数头部注释
}
- 安装vetur (vsCode插件)
- 1 vetur可以高亮vue文件代码
- 2 错误语法提示
- 3 格式化代码
- 安装ESLint (vsCode插件)
- 可以根据eslint的配置，在代码中标注错误语法（ 程序未运行也可以生效）
- 可配合vsCode中的 settings.json进行配置，实现按照eslint规则格式化
- 特别的说明
- 由于vetur中的代码格式化默认采用prettier，会导致 [“editor.formatOnSave”: true] 开启后，保存时格式可能与.eslint.js配置文件冲突的问题.因此需要对[“vetur.format.defaultFormatterOptions” ]重新配置，与.eslint.js的配置保存一致。
- ------2020-12-14
Eslint
按理说我配置了，eslint了。格式化代码的时候应该会按照脚手架提供的默认的eslint规则去格式化代码的呀。但是为什么有些部分还是没有格式话。
- .editorconfig
- .eslintrc 这两个文件是会产生冲突吗？ 因为自己是以eslint 作为格式化的，因此在.eslintrc重新设置属于自己的格式方式就可以了。那么这样的话是不是.editorconfig这个文件应该是可以删了的
module.exports = {
root: true,
env: {
node: true
},
extends: [
'plugin:vue/essential',
'@vue/standard'
],
parserOptions: {
parser: 'babel-eslint'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
// "space-before-function-paren": ["off"],
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'indent': [0, 2], // 两个空格的缩进
'quotes': [0, 'single'], // js必须使用单引号
'linebreak-style': [0, 'unix'], // 换行风格 unix/windows
'semi': [0, 'always'], // 语句强制分号结尾
"no-tabs": "off",
// 函数名后必须有空格的，去掉这个 'space-before-function-paren':0 禁用这个规则
'space-before-function-paren': ['error', {
anonymous: 'always',
named: 'never',
asyncArrow: 'always'
}],
}
}
- ------2020-12-16
