Vue（一）——Vue简介及环境搭建
一、Vue介绍
Vue.js是一套构建用户界面的 “渐进式框架”。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。。
如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。当然，在使用Vue.js时，你也可以结合其他库一起使用，比如jQuery。
1、MVVM模式
MVVM模式，即 Model-View-ViewModel 模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View。
ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。
双向绑定：
- 首先，我们将上图中的
DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。 - 从View侧看，ViewModel中的
DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据； - 从Model侧看，当我们更新Model中的数据时，
Data Bindings工具会帮我们更新页面中的DOM元素。
二、Vue环境搭建
1、安装node.js
Vue项目通常通过webpack工具来构建，而webpack命令的执行是依赖node.js的环境的，所以首先要安装node.js。
node.js的官方地址为： https://nodejs.org/en/download/
wget https://nodejs.org/dist/v16.13.2/node-v16.13.2-linux-x64.tar.xz
tar -xf node-v16.13.2-linux-x64.tar.xz -C /opt
ls /opt/node-v16.13.2-linux-x64/bin # 可以看到node npm等
# 添加环境变量
# 在 /etc/profile尾部添加以下两行
export NODE_HOME=/opt/node-v16.13.2-linux-x64/bin
export PATH=$NODE_HOME:$PATH
# 刷新环境变量使其生效
source /etc/profile
# 查看是否安装配置成功
npm -v # 8.1.2
node -v # v16.13.2
2、配置国内npm镜像
- 安装成功后，后续用到
npm的地方使用cnpm可以加速下载依赖等
# 为了提高我们的效率，可以使用淘宝的镜像：http://npm.taobao.org/
npm install -g cnpm –registry=https://registry.npm.taobao.org
# 测试是否安装成功
cnpm -v
3、Vue环境搭建
# 全局安装vue-cli
cnpm install vue-cli -g
#查看是否安装成功
vue list
三、创建项目
1、创建Vue项目
# 是否webpack模板创建初始化项目
vue init webpack first-vue
2、安装依赖
# 根据项目根目录下的json文件下载依赖，保存在 node_modules 目录下
cd first-vue
cnpm install
四、开发环境启动项目
npm run dev
# ip和端口可以在config/index.js中修改
五、空项目目录结构
1、build：构建脚本目录
1）build.js ==> 生产环境构建脚本；
2）check-versions.js ==> 检查npm，node.js版本；
3）utils.js ==> 构建相关工具方法；
4）vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀；
5）webpack.base.conf.js ==> webpack基本配置；
6）webpack.dev.conf.js ==> webpack开发环境配置；
7）webpack.prod.conf.js ==> webpack生产环境配置；
2、config：项目配置
1）dev.env.js ==> 开发环境变量；
2）index.js ==> 项目配置文件；
3）prod.env.js ==> 生产环境变量；
3、node_modules：npm 加载的项目依赖模块
4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
1）assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；
2）components：组件目录，我们写的组件就放在这个目录里面；
3）router：前端路由，我们需要配置的路由路径写在index.js里面；
4）App.vue：根组件；
5）main.js：入口js文件；
5、static：静态资源目录，如图片、字体等。不会被webpack构建
6、index.html：首页入口文件，可以添加一些 meta 信息等
7、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息
8、README.md：项目的说明文档，markdown 格式
9、.xxxx文件：这些是一些配置文件，包括语法配置，git配置等
