一.Vue-cli说明
- Vue-cli是Vue官方提供的脚手架工具，cli:command line interface
- 最新的版本是4
- 3.X版本和4.X版本变化不大，但是3.X相对于2.X的版本变化特别大
- 在线文档：cli.vuejs.org/zh/
二.创建Vue项目
2.1 创建脚手架4/3的Vue项目，并运行
- 第一步：安装vue脚手架
//1.安装Vue-cli脚手架
npm install -g @vue/cli
# OR
yarn global add @vue/cli
- 测试脚手架是否安装成功：当输入下面的指令看到脚手架版本号就表示脚手架安装成功了
- vue --version 查看的是Vue-cli的版本，不是vue的版本
- 第二步：创建一个vue的项目
//2.Vue-cli创建一个hello-world项目
vue create hello-world
- 第三步：运行项目
//3.运行Vue项目
npm run serve
2.2 创建脚手架2的Vue项目，并运行
- 1.安装Vue-cli脚手架
//1.安装Vue-cli脚手架
npm install -g @vue/cli-init
- 2.Vue-cli创建一个my-project项目
//2.Vue-cli创建一个my-project项目
vue init webpack my-project
- 3.运行Vue项目
//3.运行Vue项目
npm run dev
三.Vue-cli2和Vue-cli3/4目录和对应作用
通过vue-cli搭建一个vue项目，会自动生成一系列文件，而这些文件具体是怎样的结构、文件对应起什么作用，可以看看下面的解释：
3.1 Vue-cli3/4目录和对应作用
- public存放静态文件
- public/index.html生成项目的入口文件，webpack打包的js,css也会自动注入到该页面中
- src存放各种vue文件的地方
- src/assets用于存放各种静态文件，如图片，css
- src/compnents用于存放我们的公共组件
- src/views用于存放我们写好的各种页面
- src/App.vue主vue组件 引入其他组件，app.vue是项目的主组件，所有页面都是在app.vue下切换的
- src/main.js入口文件，作用是初始化vue实例，也可以在此文件中引用组件库或者全局变量
- src/router.js路由文件，是为各个页面的地址路径
- src/store.js状态文件
- package.json模块基本信息，项目开发所需要模块，版本，项目名称
1. ├── README.md
2. ├── index.html
3. ├── package.json
4. ├── src
5. │ ├── App.vue
6. │ ├── assets
7. │ │ ├── img
8. │ │ └── logo.png
9. │ ├── components
10. │ │ └──Helloworld.vue
11. │ ├── views
12. │ │ └── Home.vue
13. │ ├── main.js
14. │ ├── router // 路由配置文件
15. │ │ └── router.js
16. │ └── store
17. │ └──store.js
18. └── babel.config.js
19. └── package.json
3.2 Vue-cli2目录和对应作用
├── build/ # webpack 编译任务配置文件: 开发环境与生产环境
│ └── ...
├── config/
│ ├── index.js # 项目核心配置
│ └── ...
├ ── node_module/ #项目中安装的依赖模块
── src/
│ ├── main.js # 程序入口文件
│ ├── App.vue # 程序入口vue组件
│ ├── components/ # 组件
│ │ └── ...
│ └── assets/ # 资源文件夹，一般放一些静态资源文件
│ └── ...
├── static/ # 纯静态资源 (直接拷贝到dist/static/里面)
├── test/
│ └── unit/ # 单元测试
│ │ ├── specs/ # 测试规范
│ │ ├── index.js # 测试入口文件
│ │ └── karma.conf.js # 测试运行配置文件
│ └── e2e/ # 端到端测试
│ │ ├── specs/ # 测试规范
│ │ ├── custom-assertions/ # 端到端测试自定义断言
│ │ ├── runner.js # 运行测试的脚本
│ │ └── nightwatch.conf.js # 运行测试的配置文件
├── .babelrc # babel 配置文件
├── .editorconfig # 编辑配置文件
├── .gitignore # 用来过滤一些版本控制的文件，比如node_modules文件夹
├── index.html # index.html 入口模板文件
└── package.json # 项目文件，记载着一些命令和依赖还有简要的项目描述信息
└── README.md #介绍自己这个项目的，可参照github上star多的项目。
四.配置淘宝镜像
下面整个过程是基于已经安装node.js和cnpm的基础上，node.js如何安装就不在这里详说了。如何全局化安装cnpm，这里简单提一下：(淘宝镜像命令)
npm install cnpm -g --registry=https://registry.npm.taobao.org
