Vue-cli（2.9.6）快速构建一个 Vue 项目

---

Vue 是什么

Vue.js官网：https://cn.vuejs.org/

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式 JavaScript 框架。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。

---

一、安装 Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。

Node.js官网：https://nodejs.org/
版本号：16.14.0

下载安装完 Node.js，打开命令提示符（以管理员身份运行）分别输入：node -v、npm -v 出现版本号即安装成功。

备注：建议下载后缀名为 .msi 的安装包，它会帮你把环境变量给配置好，然后根据步骤安装。

---

二、安装 webpack 环境

webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。

webpack官网：https://webpack.docschina.org/

代码如下：

npm install webpack -g

结果如下：

---

三、安装 vue-cli

代码如下（示例）：

npm install vue-cli -g

结果如下：

---

四、创建 vue 项目

代码如下：

vue init webpack

结果如下：

备注:

Project name	项目名称
Project description	项目的描述
Author	作者
Install vue-router	是否安装vue-router
Use ESLint to lint your code	是否使用eslint js代码规范
Setup unit tests	是否使用单元测试
Setup e2e tests with Nightwatch	是否使用端对端测试

---

五、安装依赖包

代码如下：

npm install

结果如下：

---

六、运行项目

代码如下：

npm run dev

结果如下：

在浏览器输入 http://localhost:8080 回车，就可以看到vue欢迎页啦！

---

补充

vue 项目结构介绍
build/	webpack配置参数
config/	是vue项目的配置文件
node_modules/	node.js 模块包
src/	源代码 我们写的代码 大都放在这个文件下
static/	静态资源 （只供index.html使用）
.babelrc	babel的编译参数
.gitignore	git 忽略的配置文件
index.html	项目入口（单入口项目的入口）
package.json	node.js项目的配置文件
README.md	git的项目 说明文件

src/ 工作目录介绍
assets/	静态资源 （只供src下文件使用）
components/	组件
router	路由
App.vue	根组件
main.js	js入口文件

单文件组件

• App.vue 就是一个单文件组件。

访问流程

• index.html -> main.js -> App.vue -> router(index.js) -> components

插件

• 插件通常会为 Vue 添加全局功能。

开发插件 - 插件种类：

1. 添加全局方法或者属性，如: vue-custom-element
2. 添加全局资源：指令/过滤器/过渡等，如 vue-touch
3. 通过全局 mixin 方法添加一些组件选项，如: vue-router
4. 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
5. 一个库，提供自己的 API，同时提供上面提到的一个或多个功能，如 vue-router
   Vue.js 的插件应当有一个公开方法 install

使用插件 - 通过全局方法 Vue.use() 使用插件：

• Vue.use(插件)