初始化项目
安装 cli 命令工具
$ cnpm install -g @vue/cli @vue/cli-init
$ vue -V
3.12.0
构建一个名为 myapp 的项目
$ vue init webpack myapp
? Project name myapp
? Project description A Vue.js project
? Author itshutong <2720204561@qq.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm
vue-cli · Generated "myapp".
# Installing project dependencies ...
启动项目
$ cd myapp
$ npm run dev
image
项目结构介绍
├── build webpack打包相关配置文件目录
├── config webpack打包相关配置文件目录
├── node_modules 第三方包
├── src 项目源码(主战场)
│ ├── assets 存储静态资源，例如 css、img、fonts
│ ├── components 存储所有公共组件
│ ├── router 路由
│ ├── App.vue 单页面应用程序的根组件
│ └── main.js 程序入口，负责把根组件替换到根节点
├── static 可以放一些静态资源
│ └── .gitkeep git提交的时候空文件夹不会提交，这个文件可以让空文件夹可以提交
├── .babelrc 配置文件，es6转es5配置文件，给 babel 编译器用的
├── .editorconfig 给编辑器看的
├── .eslintignore 给eslint代码风格校验工具使用的，用来配置忽略代码风格校验的文件或是目录
├── .eslintrc.js 给eslint代码风格校验工具使用的，用来配置代码风格校验规则
├── .gitignore 给git使用的，用来配置忽略上传的文件
├── index.html 单页面应用程序的单页
├── package.json 项目说明，用来保存依赖项等信息
├── package-lock.json 锁定第三方包的版本，以及保存包的下载地址
├── .postcssrc.js 给postcss用的，postcss类似于 less、sass 预处理器
└── README.md 项目说明文档
