vue学习笔记及路线

vue

首先vue的作者是尤雨溪，在gitee和github上面都可以找到他，vue实现了前后端分离，前端需要调用接口。不需要jsp来渲染前端页面，基本上抛弃了jsp，前端框架还有Angular 和react。但是现在公司最常用的就是vue了
学习vue需要学到的有条件渲染、列表渲染、事件处理、axios异步通信、表单输入绑定、组件基础、计算属性、插槽内容、自定义事件、vue-cli、webpack、vue-router、element-ui、嵌套路由、参数传递、组件重定向、路由钩子函数+异步请求、vuex模块化开发这些，当然这些只是基础，要想掌握vue还需要实际的项目才能真正理解vue中的这些功能，要想写一个vue项目还需要了解如何调用后端提供的接口。这是我学习vue的一些见解。

常用命令

使用vue必须安装的

node.js 需要安装到本地，安装过后环境变量会自动配好

1.node -v 查看node.js的版本
2.npm -v 查看npm的版本
3.npm config set registry https://registry.npm.taobao.org //安装淘宝镜像文件，提高下载地址

npm install -g webpack安装webpack

4.npm install vue-cli -g //安装脚手架用来创建项目 vue --version查看版本 （这个是老版本）
npm install -g @vue/cli (新版本)
使用命令vue --version查看是否安装成功
5.npm install nrm (安装nrm,nrm是一个 npm 源管理器，允许你快速地在 npm源间切换)
查看可选源（带*即为当前使用源）nrm ls
查看现在使用的源nrm current
切换源nrm use 其中，registry为源名。比如切换到taobao源 nrm use taobao
添加源 nrm add 比如添加一个公司私有的npm源，源地址为：http://192.168.22.11:8888/repository/npm-public/，源名为cpm（随意取）
nrm add cpm http://192.168.22.11:8888/repository/npm-public/
删除源 nrm del
测试源的速度 nrm test

vue list

使用webpack创建项目并运行
vue init webpack 项目名
npm install
npm run dev

使用cli创建项目并运行
vue create vuefirst（项目名）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AETObmTn-1625447977878)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210703114233739.png)]

项目创建过后还需要安装elmentui和router(路由)

npm i element-ui -S //使用elment-ui

npm install vue-router --save //路由（）

npm install axios //异步请求，就是从后端过来的json数据

npm install vuex --save

查看配置
npm config ls

参数传递

三种方式：

1.在链接处加to="/messagelist/1"，在vue的内容处加{{$route.params.id}},在路由处加/:id

2.在链接处加:to="{name:‘MessageLevel’,params:{id:2}}"（以对象的形式，这里），在vue的内容处加{{$route.params.id}},在路由处加/:id

3.在链接处加:to="{name:‘MessageLevel’,params:{id:2}}"（以对象的形式，这里），在vue的内容处加{{$route.params.id}},在路由path处加/:id和props:true

路由中的钩子函数(拦截器)

在

首先安装axios

命令：npm install axios -s

import axios from ‘axios’

Vue.prototype.axios=axios;

然后还要打开tomcat并将data.json数据放进去

beforeRouteEnter: (to,from,next)=> {
console.log(“进入会员等级页面”);
next(vm=>{
vm.getData();
});
},
beforeRouteLeave: (to,from,next)=> {
console.log(“离开会员等级页面”);
next();
},
methods:{
getData:function(){
this.axios({
method:‘get’,
url:‘http://localhost:8080/data.json’,
}).then(function(repos){
console.log(repos);
}).catch(function(error){
console.log(error);
});
}
}

存放数据的vuex(相当于cooki)

首先安装vuex

命令：npm install vuex --save

云E办项目

技术：

• Vue
• Vue-cli
• Vuex
• VueRouter 路由
• ElementUIu i界面
• Axios 通信
• Es6
• Webpack 打包工具
• WebSocket 在线聊天
• font-awesome 字体
• js-file-download 文件的上传下载
• vue-chat 在线聊天（github上面有开源的）

模块

• 登录
• 职位管理
• 职称管理
• 部门管理
• 操作员历
• 员工管理
• 工资涨套管理
• 个人中心
• 在线聊天（这个可以在github上面找到开源的直接使用到）

搭建项目

安装node.js node -v ; npm -v

配置淘宝镜像npm config set registry https://registry.npm.taobao.org

npm install -g @vue/cli（这个是新版本安装方式）安装脚手架

通过cli创建项目npm create yeb

通过npm install 安装

运行项目：npm run serve

接下来安装需要用到的一些东西

1. npm i element-ui -S(i是install的缩写，s是save的缩写)

   import ElementUI from ‘element-ui’;

   import ‘element-ui/lib/theme-chalk/index.css’;

   Vue.use(ElementUI);

2. npm install --save vue-router

3. npm install axios

4. npm install vuex --save

报错

1. 安装nrm 时执行命令nrm ls时报错

   

解决方法：找到上面的js文件的第17行修改为下面的内容再次执行命令即可

// const NRMRC = path.join(process.env.HOME, '.nrmrc');
const NRMRC = path.join(process.env[(process.platform == 'win32') ? 'USERPROFILE' : 'HOME'], '.nrmrc');