Vue环境搭建及实践

环境搭建

安装Node

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

  • 检验安装成功
    安装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
    NODE_HOME
    点击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指定和每个元素的哪个属性绑定。
    这里我们tableDataStudent数组,而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

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值