创建Vue脚手架
- Vue脚手架是官方提供的标准化开发工具（最新4.x版本）
- 网址：https://cli.vuejs.org/zh/guide/
安装
- 使用淘宝镜像源安装
npm install --location=global cnpm --registry=https://registry.npm.taobao.org
- 全局安装Vue CLI（仅第一次安装需要执行）
cnpm install -g @vue/cli
- 进入到要创建项目的文件夹
cd xxxxxx
vue create vue_demo
- 启动项目
npm run serve
目录结构介绍
-
node_modules- 项目的安装依赖
-
public- 放置静态资源文件
-
src- 项目的主入口文件夹
-
执行启动命令后的文件执行
-
main.js
- 整个项目的入口文件
- 当前引入的是运行版的vue，没有模板解析器，所以是用的是render函数
-
App.vue
- 所有子组件的父组件
-
- 项目的主入口文件夹
-
.gitignore- git版本管制的忽略的配置
-
babel.config.js- ES6语法编译成ES5语法
-
package-lock.json- 记录了当前项目所有模块的具体来源和版本号以及其他的信息
-
package.json- 记录当前项目所依赖模块的版本信息
{
"name": "vue_demo", //项目名称
"version": "0.1.0", //版本号
"private": true, //是否私人项目
"scripts": { //指定运行脚本命令的 npm 命令行缩写
"serve": "vue-cli-service serve", // npm run serve 开发环境
"build": "vue-cli-service build", // npm run build 生产环境，会在项目根目录下创建dist目录，存放项目压缩文件
"lint": "vue-cli-service lint" // npm run lint 校验 vue、js语法是否符合规范
},
"dependencies": { //项目相关模块依赖
"core-js": "^3.8.3",
"vue": "^2.6.14"
},
"devDependencies": { //这里的依赖是用户开发环境的，不发布到生产环境
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"vue-template-compiler": "^2.6.14"
},
"eslintConfig": { //eslint 配置
"root": true, //用来告诉eslint找当前配置文件不能往父级查找
"env": { //指定逆向启用的环境，下面的配置指定为node环境
"node": true
},
"extends": [
"plugin:vue/essential", // 格式化代码插件
"eslint:recommended" // 启用推荐规则
],
"parserOptions": {
"parser": "@babel/eslint-parser" // 用来指定eslint解析器的，解析es6
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
-
README.md- 项目说明文件