目录
一、Vue CLI工具入门
1、Vue CLI的安装
Vue CLI是一个需要全局安装的NPM包，安装Vue CLI的前提是设备以及安装了Node.js环境。Node.js安装完成后，在终端输入以下命令检查Node.js是否安装成功。
node -v
输出版本信息则安装成功。
使用npm安装Vue CLI工具。
npm install -g @vue/cli
mac电脑在安装中会出现异常错误信息，这是因为当前操作系统的用户权限不足，使用如下命令安装。
sudo npm install -g @vue/cli
验证vue CLI工具是否安装成功。
vue --version
如果终端输入正确的版本号则安装成功。
如果官方的Vue CLI工具有更新升级，在终端使用如下命令即可进行升级。
npm update -g @vue/cli
2、快速创建项目
使用如下命令创建Vue项目工程：
vue create demo
默认即可。
使用Vue工程管理工具页面
vue ui
二、Vue CLI项目模板工程
1、模板工程的目录结构
.gitignore是一个隐藏文件，用来配置Git版本管理工具需要忽略的文件或文件夹。
babel.config.js是Babel工具的配置文件，Babel本身是一个JavaScript编译器，其会将ES6版本的代码转换成向后兼容的JavaScript代码。
package.json是一个相对比较重要的文件，其中存储的是一个JSON对象数据，用来配置当前项目名称、版本号、脚本命令以及模块依赖等。当我们需要向项目中添加额外的依赖时，其就会被记录到这个文件默认的模板工程中。
dependencies是生产环境的依赖。
devDependencies是开发环境的依赖。
README.md是一个MarkDown格式的文件，其中记录了项目的编译和调试模式，我们也可以将项目的介绍编写在这个文件中。
node_modules文件夹下存放的是npm安装的依赖模块，这个文件夹默认会被Git版本管理工具忽略，对于其中的文件，我们也不需要手动添加或修改。
public文件夹用来放置一些公有的资源文件网页用到的图标、静态HTML文件。
src是一个重要的文件夹，核心功能代码文件都存放在这个文件夹下，在默认的模板工程中，这个文件夹下还有两个子文件夹：assets和components。assets存放资源文件，components存放组件文件。
main.js是应用程序的入口文件。
public下的index.html的文件，它就是网页的入口文件。
项目工程中有一个名为App.vue的文件，这其实使用了Vue中单文件组建的定义方法，即将组件定义在单独的文件中，以便于开发和维护。
单文件组件通常需要定义3部分内容：template模板部分、script脚本代码部分和style样式代码部分。
2、运行Vue项目工程
在当前Vue项目的工程目录
npm run serve
三、在项目中使用依赖
安装依赖包依然使用npm相关命令
安装vue-axios
npm i vue-axios
如果在安装过程中出现权限问题，则需要在命令前添加sudo再执行
pacjage.json文件会自动更新，在node_modules文件夹下也会新增vue-axios模块文件
也可以使用图形化工具进行依赖的管理
四、工程构建
开发完一个Vue项目后，需要将其构建成可发布的代码产品。
运行如下命令，可以直接将项目代码编译构建生成包
npm run build
五、新一代前端构建工具 Vite
1、Vite与Vue CLI的比较
Vite 是基于原生 ES6 Modules，在生产环境下打包使用的是 Rollup。vue-cli 基于 webpack 封装，生产环境和开发环境都是基于 Webpack 打包。所以两者在生产环境下都是基于源代码文件打包。但在开发环境中，两者有所不同。Vite 在开发环境下，基于原生 ES6 ，无需对代码进行打包，浏览器可以直接调用。所以 Vite 因为基于浏览器的原生功能，省掉了打包过程，在开发环境中体验及其愉快。
2、体验Vite构建工具
首先确保node.js版本大于12.0.0
在终端执行如下指令来创建Vue项目工程
npm init vite-app demo1
在工程目录下第一次执行npm run dev要先安装依赖npm i
561
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
