目录
简介
本文重在介绍Vue环境的安装以及Vue配合Element的使用,其他知识在Vue的官网中有更详尽的介绍,可以在文章中给出的网址进行学习。
一、下载与安装
1.Vue开发环境构建
1.1 Nodejs
在Nodejs官网下载对应系统文件: https://nodejs.org/en/
安装完执行:node -v 查看是否安装完以及版本
1.2 npm
下载npm工具,也可以下载npm的镜像cnpm。
在命令行执行:
npm install -g cnpm -registry=https://registry.npm.taobao.org
安装完执行:npm -v 查看是否安装完以及版本
1.3 webpack
构建工具。
1.4 vscode
在扩展中安装插件:
Vetur
vscode-icons
2. 搭建Vue环境
进入vueg官网: https://cn.vuejs.org/
安装费vuecli工具:
npm isntall -g @vue/cli //用npm工具
cnpm isntall -g @vue/cli //用cnpm工具
创建项目:
在vscode中创建文件夹,在文件夹中按 Crtl + · 切换到终端
输入下面命令创建项目,项目名不可以含有大写:
vue create vue-base
选择第三个:Manusally select featrues ,回车进行选择
使用 空格 进行选择和取消选择,选择如下2个:
选择2.X的版本
选择保存配置文件的位置,随便一个:
是否保存刚刚的配置并命名,下次直接选择名字,初始阶段可以选不:
然后会进入下载依赖。
安装完毕:
然后进入项目:
cd vue-base
运行项目:
npm run serve
然后浏览器访问 localhost:8080 会出现下面页面:
二、Vue知识学习
可以在vue官网进行学习: https://cn.vuejs.org/guide/quick-start.html
1.基础知识
1、模板语法
1.插值
1.文本: {{ }}
2.原始HTML:v-html
3.属性: v-bind:attr
4.模板语法使用限制:每个绑定仅支持单一表达式
2.指令
3.缩写
1.v-bind: 缩写-> :
2、条件渲染
1.v-if
2.v-else
3.v-show
3、列表渲染
1.v-for
2.数组更新检测
4、事件处理
1.v-on:click 缩写-> @
2.methods 承载事件函数
3.事件传递参数
4.修饰符
5、表单输入与绑定
1.v-model
2.修饰符
.lazy
.number
.trim
6、计算属性vs侦听器
1.computed
2.watch
7、class与Style绑定
1.数组
2.对象
8、组件基础
1.创建组件
2.引用组件
3.组件时独立实例化的,data必须是一个函数
4.props 父向子传参数
5.自定义事件 子传父
9、插槽
1.插槽内容
2.具名插槽
3.作用域插槽
10、动态组件与异步组件
2.路由
进入官网学习: https://router.vuejs.org/zh/introduction.html
1.路由的基础使用
2.动态路由匹配
3.文件分离
4.嵌套路由
5.编程式导航
6.命名视图
7.重定向和别名
8.HTML5 History模式
9.导航守卫
3.axios
进入中文网学习: https://www.kancloud.cn/yunye/axios/234845
安装axios:
npm install axios
1.封装axios请求:
import axios from "axios"
import qs from "querystring"
/**
* 错误信息处理函数
*/
const errorsHandle = (status,info) =>{
switch(status){
case 400:
console.log("语义有误,当前请求无法被服务器理解。除非进行修改,否则客户端不应该重复提交这个请求。")
break;
case 401:
// token:令牌
console.log("服务器认证失败")
break;
case 403:
console.log("服务器已经理解请求,但是拒绝执行它");
break;
case 404:
console.log("请检查网络请求地址")
break;
case 500:
console.log("服务器遇到了一个未曾预料的状况,导致了它无法完成对请求的处理。一般来说,这个问题都会在服务器的程序码出错时出现。")
break;
case 502:
console.log("作为网关或者代理工作的服务器尝试执行请求时,从上游服务器接收到无效的响应。")
break;
default:
console.log(info)
break;
}
}
/**
* 创建Axios的实例对象
*/
var instance = axios.create({
timeout: 5000,
});
/**
* 拦截器
*/
instance.interceptors.request.use(
config =>{
if(config.method === "post"){
config.data = qs.stringify(config.data)
}
return config;
},
error =>{
return Promise.reject(error);
}
)
instance.interceptors.response.use(
response => response.status === 200 ? Promise.resolve(response) : Promise.reject(response),
error =>{
const { response } = error;
if(response){
errorsHandle(response.status,response.info);
}else{
console.log("请求被中断了");
}
}
)
// 封装get 和 post请求
export default instance
2.跨域问题
1.后台解决
安装cors
npm install cors --save
服务器使用cors:
const express = require("express");
const app = express();
const cors = require("cors");
app.use(cors());
app.get("/list",(req,res) =>{
res.send({
status:200,
result:"Hello"
})
})
app.listen(3000,()=>{
console.log("服务器运行在3000端口上");
})
2.前端解决:开发环境下跨域
在项目根目录下增加 vue.config.js 文件,书写跨域配置:
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000/',
changeOrigin: true,
pathRewrite:{
'^/api':""
}
}
}
}
}
4.Vuex
进入官网学习: https://vuex.vuejs.org/zh/
5.Vue插件
github网站很多插件供选择: https://github.com/vuejs/awesome-vue
6.Vue插件-ElementUI组件库
ElementUI官网:https://element.eleme.cn/#/zh-CN/component/installation
可以使用添加插件方式添加插件: https://github.com/ElementUI/vue-cli-plugin-element
创建项目,进入项目后,
插件添加方式:
vue create my-app
cd my-app
vue add element
选择 import on demand (按需加载
选择中文
运行项目
src包下会出现element.js插件
可以将途中所示的组件全部放入上面图中的js文件中,项目开发完再将没用的组件删去。
初始化 HelloWord.vue
在element组件库中选择合适的组件:
黏贴到vue的网页代码中 ,crtl+s保存一下修改过的类
又如添加表格组件
<template>
<div class="hello">
<div>
<h3>开关</h3>
<el-switch
v-model="value"
active-color="#13ce66"
inactive-color="#ff4949"
>
</el-switch>
</div>
<div>
<h3>表格</h3>
<el-table
:data="tableData"
stripe
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
value: true,
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
};
},
};
</script>
浏览器访问 localhost:8080