Vue cli 安装

一、前言

因为之前的引用vue.js的方式，只能适合学习和简单的代码使用，如果真的进行项目的开发，就需要搭建vue cli脚手架。

vue-cli的初衷: 这些工具就是为了让开发者能够开箱即用快速地进行应用开发而开发的，它们秉承的是“约定大于配置”思想，简单说就是"能不配置的就不配置， 它们不建议你去配置，但也不会拦着你去配置。

另外Webpack对初学者并不是十分友好，很多繁琐的配置，普通开发者很难写入定义良好，性能优化的配置，目的就是让开发者能够愉快的进行代码开发。

总结：

vue-cli 3 的设计原则是“0配置”。

二、webpack的简介

为什么要简介一下webpack？

• vue-cli 3 是基于webpack 4 打造的，vue-cli 2 还是 webpack 3
• webpack是基于node.js的，所以我们在安装脚手架前必须安装node

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求。

三、Vue cli的安装

前提是安装 node.js

1.命令行中输入（会等待一些时间，下载很多文件）

npm install -g @vue/cli

2。如果npm下载很慢的话，可以使用淘宝镜像安装

cnpm install -g @vue/cli

使用淘宝镜像安装，可以使用，但是后期可能会存在某些问题，比如说最后项目打包的时候可能会打包失败或者报错。

四、项目的创建

（一）、方式一（vue-cli 3 提供了vue ui 命令）

• 在对应文件夹，打开命令行
• 输入vue ui

• vue ui

• 这样会跳转到一个网页进行项目的创建和配置，更加方便和直观。
• 
•  点击进行创建配置

（二）、方式二

1、打开对应的文件夹，进入命令行

2、输入vue create +项目名

vue create job

3、进行选择版本

• 1、 区别：
• default模式只有一些基本（预设）的配置，vuex  vue router都没有装上。
• Manually select features，会有一些选择配置，需要进行选择，相对来说要方便一些，还集成了ts。
• vue2使用Object.defineProperty方法实现响应式数据，vue3使用proxy实现响应式数据
• Object.defineProperty的缺点：
• 　　无法检测到对象属性的动态添加和删除
• 　　无法检测到数组的下标和length属性的变更
• proxy的缺点：
• 　　es6的proxy不支持低版本浏览器（IE11）
• 　　会针对IE11出一个特殊版本进行支持
• proxy的优点：
• 　　可以坚测到代理对象属性的动态新增和删除
• 　　可以监测到数组的下标和length属性的变化
• 2、vue3新特性：
• 　　①：数据响应重新实现（ES6的proxy代替ES5的Object.defineProperty）
• 　　②：源码使用ts重写，更好的类型推导
• 　　③：虚拟DOM新算法（更快、更小）
• 　　④：提供了composition api，为更好的逻辑复用与代码组织
• 　　⑤：自定义渲染器（app、小程序、游戏开发）
• 　　⑥：Fragment，模板可以有多个根元素
• 3、Manually select features（需要我们手动选择一些配置，主动性和需求化更强）
• 

4、创建成功一个项目（以vue3为例）

到此为止，我们的项目就已经创建成功了，在刚才的文件地址中，就生成了项目命名的文件夹。我们可以用vscode打开这个项目。

五、项目的启动

方式一：在项目文件夹中，打开命令行，输入npm run serve，然后复制网页浏览器打开。

 方式二：vscode打开项目文件，然后在终端中同样的方式启动

六、项目目录结构

（还有一些照片中没有的文件目录）

• node_modules —— 项目依赖文件，其中包括很多基础依赖和自己安装的依赖。
• public —— 存放公共资源和项目的主入口文件index.html。
• src —— 项目核心文件夹：包括项目源码，各种静态资源等等。是我们开发的重点工作目录。
• .gitignore —— Git上传时需要忽略的文件目录；
• package-lock.json —— 版本管理使用的文件；
• package.json —— 项目的基本配置信息文件，包括各种插件，依赖以及某些依赖的详细配置等
• README.md —— 项目的描述文件。