创建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
- 项目说明文件