目录文档
├── .gitignore git repo 长裤配置文件
├── README.md 工程运行的说明文件
├── babel.config.js babel 配置文件处理es6语法编译问题
├── jsconfig.json 目录是JavaScript项目的根目录
├── package-lock.json 安装包packages日志文件
├── package.json npm工程的入口文件
├── public 静态资源文件
│ ├── favicon.ico 浏览器的icon图标
│ └── index.html 启动服务后浏览器运行的文件
├── src 开发者编写代码文件
│ ├── App.vue 主组件文件
│ ├── assets 资源管理文件，组件开发中引入 css img ..
│ │ └── logo.png 图片
│ ├── components 公共组件管理文件
│ │ └── HelloWorld.vue 单文件组件
│ └── main.js 工程的入口文件
└── vue.config.js vue-cli工程的配置文件
npm run serve
执行package.json 文件
vue-cli-service serve
运行 vue.config.js 根据配置启动服务
服务在编译打包中：src/main.js
对文件进行解析，编译，编译为浏览器尅读懂的html css js q
main.js 直接或者间接加载的 所有依赖
.vue文件；都会编译。-----> 浏览器可以读懂的html css js
packages
"@babel/core": "^7.12.16", babel核心
"@babel/eslint-parser": "^7.12.16", babel的插件
"@vue/cli-plugin-babel": "~5.0.0", 让babel作为vue-cli的插件。集成babe
"@vue/cli-plugin-eslint": "~5.0.0", 让eslint作为vue-cli插件 集成eslint
"@vue/cli-service": "~5.0.0", 创建的vue的服务
"eslint": "^7.32.0", 效验代码书写是否规范
"eslint-plugin-vue": "^8.0.3", vue的eslint 的插件
"vue-template-compiler": "^2.6.14" 编译.vue文件的差劲
eslint
// eslint 配置项
// 在使用eslint 时 执行配置代码
// 可以单独创建 配置文件
// 可以写在package.json中
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {
// https://eslint.bootcss.com/docs/rules/
}
},
Npm 安装的所有packages 都可以将配置项写在package.json中，也可以单独创建配置问阿金
jsconfig.json
{
"compilerOptions": {// 用户配置对js语法的支持
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": { // js代码中路径配置
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
}
// 参考链接：https://segmentfault.com/a/1190000018013282
vue.config.js
配置 vue-cli-servive 运行是一些配置
开发环境
vue-cli-service serve
npm run serve
生产环境
npm run build
vue-cli-service build
配置处理
开发者规范
- 1：单文件组件大驼峰命名
- 2：每个
.vue都要有name:DlButton - 3: html属性命名
dl-xx-xx - 4：变量声明let const
- 5: 变量名 xx_xx
- 6：函数名 小驼峰
- 7：prototype函数 $xxx
- 8:prototype 属性 _xxxx
\
