Vue-CLI的安装、项目构建及项目构建目录说明

一、什么是cli?

cli是vue提供的一个用来快速构建项目环境的一个工具，底层使用的是webpack

二、cli目前有哪些版本？

• cli2
• cli3 — cli3对电脑的配置有一定要求

三、CLI的安装及项目构建

1、说明

• Vue CLI需要Node.js版本8.9或更高版本，
• Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x或 2.x)，你可以通过一下命令卸载它

	npm uninstall vue-cli -g
	#或者
	yarn global remove vue-cli

2、cli的安装

使用npm/cnpm/yarn 都可以安装

i、使用yarn安装，首先要确保你已经安装了yarn。

• 这个是cli3的版本

   1、$ yarn add @vue/cli global   

• 如果我们还想使用cli2的脚手架，那么我们可以在安装一个包，调节工具

    2. $ yarn add @vue/cli-init global

ii、 如果使用yarn安装失败，可以使用cnpm继续安装

• 这个是cli3的版本，调节工具

    1. $ cnpm i  @vue/cli -g

• 如果我们还想使用cli2的脚手架，那么我们可以在安装一个包

	2、$ cnpm i  @vue/cli-init -g

iii、如果安装还有问题：
那么就不要使用cli3，可以安装cli2

	$ cnpm i vue-cli -g

3、验证是否安装成功

命令行输入： $ vue 看是否有东西输出，如果输出命令提示，证明安装成功

4、项目创建

== cli3版本创建==

1. 命令创建

```
	 $ vue create project(项目名称)
```

• 手动选择配置

• 如果安装node-sass出问题，如何解决：

  • 先切换成npm源 nrm use npm
  • 使用cnpm 安装 cnpm i node-sass -D

  示例
  1、 please pick a preset( user arrow keys ) 使用键盘上下键来选择一个配置，一般默认会出现两个选项：

  • . default 默认配置

  • . Manually select features 手动选择配置 ，选中Enter进入下一步

2、 Manually select features 手动选择配置

配置指的是配置webpack

     babel 优雅降级   es6   --->  es5 

     eslint js语法检测

     CSS Pre-processors css 预处理语言  less  sass/scss  stylus

     Linter / Formatter    eslint  /   jslint

      Unit Testing   单元测试

      E2E Testing    端到端的测试

3、选择一种配置语言

4、 In dedicated config files 将所选的每一个选项用一个文件来保存（ 配置 ），并建立一个文件夹名称。


5、项目创建过程

这里node-sass安装容易出问题，如果安装node-sass出问题，使用cnpm i node-sass -D

6、可以用yarn启动服务

项目创建成功会打开如下图片

2. 图形界面的创建

使用命令

	$ vue ui

== cli2版本创建==

1. 标准版

使用命令：

    `$ vue init webpack project`

2. 简易版

使用命令：

    `$ vue init webpack-simple project`

四、项目目录创建分析

i 、cli3构建项目

• node_modules 项目的依赖包
  - cli3webpack配置放在node_modules中

• public 静态资源目录（ 生产环境 ）【 这个目录下的静态资源不会被webpack 编译 】
  - img
  - js
  - css
  - favicon.ico 项目标题的logo
  - index.html 根实例组件的模板，也是整个项目的容器

• src 源代码开发目录（ 也是开发者主要开发的目录文件夹 ）
  - assets 开发环境的静态资源目录 （ 这个目录中的资源会被webpack编译）
  - assets中如果图片的大小 > 4k 就原样拷贝到dist目录
  - assets中如果图片的小小 < 4K 我们就将这个图片转化成 base64
  - base64它是我们前端处理图片的一种形式，将图片路径进行编码，它可以减少一次ajax请求，达到前端性能优化的一个方案，但是base64有一个弊端，这个弊端就是会污染html结构

• components 组件存储目录
  - xxx.vue文件 单文件组件 一个vue文件就是一个组件
  - 组成部分:

        -  template模板（ 必须写的 ）
        -  script脚本 （ 可写可不写）
        -  style样式 （ 可写可不写 ）
        -  scoped 作用是可以减少命名冲突，规定一个样式的作用域
  

• .gitignore git上传忽略文件配置

• babel.config.js 优雅降级配置文件 用来将es6 --> es5

• package.json 整个项目的依赖配置文件

• README.md 整个项目启动的说明性文件

• yarn.lock 真个项目的依赖性文件的信息

• postcss.config.js 项目css预处理的配置

• .browserslistrc 浏览器版本的支持

i i、cli2构建项目

a、 标准版

• build ------webpack配置

• config -------webpack配置

• node_modules --------项目的依赖包

• src --------源代码开发目录

• static ---------静态资源配置

• .babelrc --------优雅降级配置文件

• .postcssrc ---------- css预处理配置文件

• .editorconfig ----------- 编辑器配置文件

• .gitignore -----------git上传忽略文件配置

• package.json ----------- 整个项目的依赖配置文件

b、简易版

• src 源代码开发目录
• webpack.config.js ----------webpack配置文件
• • .editorconfig ----------- 编辑器配置文件
• .gitignore ----------git上传忽略文件配置
• package.json ---------- 整个项目的依赖配置文件