Vue环境搭建及实践

环境搭建

安装Node

• 下载并安装nodejs
  官网：https://nodejs.org/en/download/
  选择LTS版本，适合自己系统的版本下载，修改好安装位置即可。为了尽量不占用系统盘，且不需要管理员权限访问文件夹，建议安装在D盘。我按装位置是 D:/Develop/nodejs

• 检验安装成功
  安装node之后会默认为我们安装npm包管理器，并且npm版本低于node版本。

• 设置缓存位置和全局安装位置切换淘宝镜像源
  在nodejs安装目录创建文件夹 node_global 和 node_cache。如果发现需要管理员权限，只要右键nodejs文件夹 -> 属性 -> 安全 -> 编辑 -> 设置完全控制。之后发现新建文件夹时不再需要管理员权限
  
  之后打开cmd，输入以下命令

  npm config set prefix "D:\Develop\nodejs\node_global"
  npm config set cache "D:\Develop\nodejs\node_cache"
  npm config set repository https://registry.npm.taobao.org
  

• 配置环境变量
  右键我的电脑 -> 属性 -> 高级系统设置 -> 环境变量 -> 系统环境变量 -> 新建
  变量名：NODE_HOME
  变量值：D:\Develop\nodejs\node_global\node_modules
  
  点击Path，编辑 -> 新建，加入以下条件：

  	D:\Develop\nodejs\node_global
  	D:\Develop\nodejs\
  

  

Vue2环境

• 安装Vue

  	npm install vue -g
  	npm install vue-cli -g
  

• 创建Vue2项目

  cd D:\vue-project
  vue init webpack test01
  

• 构建并运行

  npm install
  npm run serve
  

Vue3 环境

• 安装Vue

  npm install -g vue@next
  npm install -g @vue/cli
  或
  yarn global add @vue/cli
  

• 创建vue项目

  vue ui
  

  之后我们将自动打开浏览器，开始创建项目。
  • 点击创建，指定项目路径，创建文件即可
  • 取个项目名，包管理器可以使用yarn也可以使用npm。不需要创建git仓库
    
  • 选一套预设，我们选择Vue3，也可以选择Vue2或者手动配置，点击创建项目
  • 项目创建完成
    
  • 运行一下试试吧
    左侧任务，server，运行即可。默认工作在8080端口，可以点击输出查看日志
    
  • 运行成功
    
    如果我们需要再去安装一些依赖或者组件，比如element UI，可以使用npm或者yarn，但是可能不会更新文件目录。这里可以使用GUI来安装。
• 安装依赖
  以安装elementUI为例，点击左侧依赖，然后点击右上角安装依赖，搜索elementUI，选择运行依赖和开发依赖，搜索elementui，然后选择第一个安装即可
  

Vue介绍

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

Vue2和Vue3

Vue2和Vue2的区别：

• 响应原理不同
  Vue2.x实现双向数据绑定原理，是通过es5的 Object.defineProperty，根据具体的key去读取和修改。其中的setter方法来实现数据劫持的，getter实现数据的修改。但是必须先知道想要拦截和修改的key是什么，所以vue2对于新增的属性无能为力，比如无法监听属性的添加和删除、数组索引和长度的变更，vue2的解决方法是使用Vue.set(object, propertyName, value) 等方法向嵌套对象添加响应式。
  Vue3.x使用了ES2015的更快的原生proxy 替代 Object.defineProperty。Proxy可以理解成，在对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy可以直接监听对象而非属性，并返回一个新对象，具有更好的响应式支持
• 生命周期函数不同：
  Vue3的生命周期函数名为：“on”+hook。
  beforeCreate -> 请使用 setup()
  created -> 请使用 setup()
  beforeMount -> onBeforeMount
  mounted -> onMounted
  beforeUpdate -> onBeforeUpdate
  updated -> onUpdated
  beforeDestroy -> onBeforeUnmount
  destroyed -> onUnmounted
  errorCaptured -> onErrorCaptured

Vue3优点

参考文献：https://zhuanlan.zhihu.com/p/410951679

• 性能提升
  vue2中的虚拟dom是全量的对比（每个节点不论写死的还是动态的都会一层一层比较，这就浪费了大部分事件在对比静态节点上）
  vue3新增了静态标记（patchflag）与上次虚拟节点对比时，只对比带有patch flag的节点（动态数据所在的节点）；可通过flag信息得知当前节点要对比的具体内容。
• 按需编译，体积更小

Vue目录结构

根目录

• node_modules：项目需要的依赖和插件，当我们执行npm install时会创建该目录并将依赖下载至该目录。该文件夹比较大，在我们上传代码时可以将该目录删除。
• public：公共资源，存放页面图标和不支持 JavaScript 情况时的页面。
• src：源码
  • assets：资源文件，比如存放 css，图片等资源。
  • component：组件文件夹，用来存放 vue 的公共组件（注册于全局，在整个项目中通过关键词便可直接输出）。
  • router：router配置路由。
    • index.js：用于配置路由，确定访问哪个URI将跳转至哪个页面
  • views：用来放主体页面，虽然和component文件夹都是 vue 文件，但 views 下的 vue 文件是可以用来充当路由 view 的。
  • App.vue：阅读main.js可知，这是应用的入口。当项目部署起来之后就会访问这个文件
  • main.js：是项目的入口文件，作用是初始化 vue 实例，并引入所需要的插件。
• babel.config.js：babel 转码器的配置文件。
• package.json：非常重要的一个文件，它存放项目配置及所需的依赖版本等，功能类似maven的pom.xml
• vue.config.js：vue配置文件
• yarn.lock：用来构建依赖关系树。为避免包版本不匹配，确切安装的版本被固定在包锁定文件中。每次添加模块时，npm 和 Yarn 分别创建（或更新）一个package-lock.json和yarn.lock文件。这样，您可以保证另一台机器安装完全相同的软件包，同时仍然具有package.json。

npm和yarn

参考文献：https://www.w3cschool.cn/article/9538462.html
两者都是包管理器。在我们安装好node之后就会安装npm，要安装使用yarn需要安装一下：
npm install -g yarn
总的来说，yarn并发下载配置包，速度更快一点，也更加安全。
下面来看一下使用的命令的区别，我们只看常用的几个命令

# 安装依赖
npm install 或 yarn install
# 部署项目
npm run serve 或 yarn serve
# 编译项目
npm run build 或 yarn build
# 安装一个包
npm install [package]​ 或 ​yarn add [package] 
# 卸载一个包
​npm uninstall [package]​ 或 ​yarn remove [package]​
# 安装一个包作为开发依赖
​npm install --save-dev [package]​ 或 ​yarn add --dev [package]​ 
# 卸载开发依赖包
​npm uninstall --save-dev [package]​ 或 ​yarn remove [package]​
# 更新依赖
​npm update​ 或 ​yarn upgrade​
# 更新一个包
​npm update [package]​ 或 ​yarn upgrade [package]
# 查看配置
npm config list 或 yarn config list
# 修改配置
npm config set [key] [value] 或 yarn config set [key] [value]​

项目实战

1. 新建一个项目，熟悉vue基本用法。参考官方文档：
   https://v3.cn.vuejs.org/guide/introduction.html

2. 安装router插件，我们在页面跳转的时候会用到。
   https://v3.cn.vuejs.org/guide/routing.html

3. 安装axios依赖，我们在使用异步请求来向后端获取数据的时候用到。
   https://axios-http.com/docs/intro

4. 安装elementUI plus，是一个组件库，当我们需要layout布局，表格，抽屉，按钮等组件时直接拷贝代码粘贴到我们的项目中然后修改即可。
   QuickStart：https://element-plus.gitee.io/zh-CN/guide/quickstart.html
   组件库：https://element-plus.gitee.io/zh-CN/component/button.html
   cmd执行 yarn add element-plus
   项目完整引入ElementPlus，修改main.js

   import { createApp } from 'vue'
   import App from './App.vue'
   import router from './router'
   import ElementPlus from 'element-plus'
   import 'element-plus/dist/index.css'
   
   createApp(App)
   .use(router)
   .use(ElementPlus)
   .mount('#app')
   

5. 开始开发，首先可以编辑入口界面App.vue。直接去element Plus找个好看的Container布局粘过来。注意以下要求：
   左侧导航栏要有路由功能，只要在el-menue添加 router属性或 router="true"
   每个菜单项 index="URI"，这里URI是访问路径。一会儿在 router/index.js中设置。
   el-main标签内添加 router-view标签，这样页面跳转之后会作为子页面在中间显示。
   大致这样：

   <el-container>
     <el-header>Header</el-header>
     <el-container style="height: 2000px; border: 1px solid #eee">
       <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
         <el-menu router :default-openeds="['0']">
           <el-submenu index="0">
             <template slot="title"><i class="el-icon-notebook-1"></i>通信录</template>
             <el-menu-item index="StudentManage"><i class="el-icon-refresh"></i>信息查询</el-menu-item>
             <el-menu-item index="AddStudent"><i class="el-icon-edit"></i>添加信息</el-menu-item>
             <el-menu-item index="StudentSearch"><i class="el-icon-search"></i>查找</el-menu-item>
             <el-menu-item index="Fuzzy"><i class="el-icon-view"></i>模糊查询</el-menu-item>
             <el-menu-item index="Dustbin"><i class="el-icon-delete"></i>回收站</el-menu-item>
           </el-submenu>
         </el-menu>
         <el-menu>
         ......
         </el-menu>
       <el-aside>
       <el-main>
         <router-view></router-view>
       </el-main>
      </el-container>  
   </el-container>
   

6. 设置路由
   修改 router/index.js 。有两种方式，第一种先import页面作为组件，然后配置。另一种不要先import，直接在component属性中动态添加。

   import StudentManage from '../views/StudentManage'
   const routes = [
   	// 第一种方式，先import再使用
   	{
   		path: "/",
   		name: "通信录",
   		component: Index,
   		redirect: "/StudentManage",
   	},
   	{
   		path: "/AddStudent",
   		name: "添加信息",
   		component:()=>import("../views/AddStudent")
   	}
   ]
   

   这样当我们访问 / 时会跳转到 /StudentManage ，返回的页面是 src/views/StudentManage
   当访问 /AddStudent 时返回的页面是 src/views/AddStudent

7. axios异步请求获取数据并展示
   如何获取数据

   data() {
   	return {
     		pageSize: 0,
     		total: 0,
    		tableData: []	// 定义一个一维数组，用于接受数据
   	}
   },
   page(currentPage) {
     const _this = this
     // axios发送异步请求来获取数据
     axios.get('http://localhost:8181/student/findAll/' + (currentPage - 1) + '/10').then(function (resp) {
       console.log(resp)
       _this.tableData = resp.data.content
       _this.pageSize = resp.data.size
       _this.total = resp.data.totalElements
     })
   }
   

   如何绑定数据，建议先去看以下 element Plus的示例代码，以及每个属性的含义
   el-table标签中data属性代表绑定的数据的数组
   el-table-column标签中的prop指定和每个元素的哪个属性绑定。
   这里我们tableData是 Student数组，而Student类有以下属性

   {
   	id: 1,
   	number: "xxxx",
   	.....
   }
   

   vue中的代码片段

   <el-table :data="tableData" border style="width: 100%">
     <el-table-column prop="id" label="序号"  width="50"></el-table-column>
     <el-table-column prop="number" label="学号" width="90"></el-table-column>
     ..... 若干个<el-table-column>标签用于将所有需要展示的属性进行绑定.......
   </el-table>
   

8. 带有参数的页面跳转
   在前后端分离之前，我们的页面跳转分为服务器端跳转和客户端跳转。

   • 服务器端跳转是指，Servlet接受Request之后将请求转给另一个服务器资源，给出响应，期间只请求一次，而且URL不变。一般是使用RequestDispather对象的forward方法

     request.getRequestDispatcher("login.jsp").forward(request,response) ;
     

   • 客户端跳转则是指，Servlet拿到请求之后返回一个URL，之后客户端拿着这个URL再发一次请求，这样需要两次请求且URL改变。一般是使用HttPservletResopse对象的sendRedirect函数实现

   而现在，我们前后端分离，在进行页面跳转时有所改变。如果我们要进行客户端跳转，则只要给出URL即可，无需访问后端请求数据。比如我们一开始在给导航栏设置路由的时候，给每个menu-item的index属性绑定了一个URL，这样点击的时候就实现了无参数的客户端跳转。现在，比如我要修改某个学生的信息，需要知到这个学生的id，同时需要跳转到更新学生信息的页面。而我们请求后端只能拿到数据或者告诉后端要进行哪些操作，后端无法给我们重定向的URL，无法实现服务器端跳转。这时，我们只要实现客户端跳转，然后传一个参数即可。方法是：从StudentManage页面跳转到StudentUpdate页面时指定URL，并且传一个参数。当我们跳转到StudentUpdate页面后，JavaScript拿到这个参数去请求后端拿到数据，或者发送指令。
   StudentManage.vue中的跳转代码

   editStudent(row) {
     this.$router.push({
       path: '/update',	// 指定跳转路径
       query: {	// 添加参数
         id: row.id
       }
     })
   }
   

   StudentUpdate.vue中拿到参数并请求后端获取数据

   created() {
   	const _this = this
   	// 获取参数方法：this.$route.query.id
   	axios.get('http://localhost:8181/student/findById/' + this.$route.query.id).then(function(resp) {
   			console.log(resp)
   			_this.form = resp.data
   		})
   }
   

   在页面跳转时，我们可以发现，请求的URL变了，从http://localhost:8080/StudentManage变为http://localhost:8080/update?id=1

9. 想了解更多后端实现细节及代码，请移步我的另一篇博客：http://t.csdn.cn/qwGVS