1. 介绍
Vue(读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue知识类比：
| Vue | 类比 | 解析 |
| node | python、jdk | node是用c++编写用来运行js代码的 |
| npm(cnpm) | pip | npm是一个终端应用商城，可以换国内源cnpm |
| vue | django | vue是用来搭建vue前端项目的 |
Vue的几个主要模块：
- 网络通信：
axios - 页面跳转：
vue-router - 状态管理：
vuex - Vue-UI：
ICE框架
2. 安装
2.1 安装node
官网下载安装包，由于我使用的是Mac系统，大家可以根据自己的系统来下载，下载地址：https://nodejs.org/zh-cn/download/
| 下载 | 根据提示安装 |
 |
 |
验证是否安装成功：
node -v npm -v
安装成功！
2.2 安装Vue
1.换源安装cnpm（把镜像源配置为淘宝镜像源）：
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
2. 安装Vue项目脚手架：
sudo cnpm install -g @vue/cli
3. 查看vue-cli是否成功
vue info
注意：如果终端安装失败时，可以清空npm缓存，再重复执行失败的步骤
npm cache clean --force
3. 项目创建
3.1 创建项目
1.打开命令窗口，进入要创建项目的目录路径：
cd 项目路径..
2.创建项目（项目名为demo）:
vue create hello-world
3.按提示选择Vue的版本，我选择默认，按Enter:
安装成功：
3.2 目录结构
可以看到Vue的目录结构如下：
目录结构解析：
├── v-proj | ├── node_modules // 当前项目所有依赖，一般不可以移植给其他电脑环境 | ├── public | | ├── favicon.ico // 标签图标 | | └── index.html // 当前项目唯一的页面 | ├── src | | ├── assets // 静态资源img、css、js | | ├── components // 小组件 | | ├── views // 页面组件 | | ├── App.vue // 根组件 | | ├── main.js // 全局脚本文件（项目的入口） | | ├── router | | | └── index.js// 路由脚本文件（配置路由 url链接 与 页面组件的映射关系） | | └── store | | | └── index.js// 仓库脚本文件（vuex插件的配置文件，数据仓库） | ├── README.md └ └── package.json等配置文件
3.3 两个文件（App.vue及main.js））
1. vue组件(.vue文件)：
import HelloWorld from './components/HelloWorld.vue' <template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div> </template> <script> export default { name: 'App', components: { HelloWorld } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
解析：
- template：有且只有一个根标签
- script：必须将组件对象导出 export default {}
- style: style标签明确scoped属性，代表该样式只在组件内部起作用(样式的组件化)
2. 全局脚本文件main.js（项目入口）
import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app')
4.运行项目
进入新创建项目的目录，然后执行npm run serve命令，开始构建：
构建成功：
浏览器打开：http://localhost:8080/，可以看到启动成功！
4.2 如何部署到别的环境
首先要有这样一个思路，就是任何一个项目，都是在一个适合自己的特定环境下运行的，所以我们在拷贝项目的时候，可以把核心代码拿下来然后在本地安装环境。VUE项目就是如此。
具体思路就是：
1.拷贝public、src、package.json，前两个是核心代码，后面的是环境配置。
2.执行cnpm/npm install，会生成node_modules的文件夹。
3.npm run serve 运行项目就ok了。
