安装vue
https://cn.vuejs.org/v2/guide/ vue官方说明网站
先安装git 安装node.js
创建一个新的Vue工程
cmd找到安装文件夹地址
npm install --global vue-cli 全局安装
vue -V 显示版本号
vue init webpack 【my-project】 (项目文件夹名)
npm run dev 启动项目
GIT的用法
git clone 拉取数据
git pull 更新数据
git add * 添加
git commit -m ‘xxx’ 单引号内为备注内容
git push 提交
添加插件
npm i --save ant-design-vue 安装ant-design-vue组件 (一款ui)https://vue.ant.design/docs/vue/introduce-cn/
这个文件为全局设置
全局引入ant-design-vue
import Antd from ‘ant-design-vue’
import ‘ant-design-vue/dist/antd.css’
Vue.use(Antd)
路径
vue的路径跳转与平常的html不同
需要在router文件夹里的index设置路径
比如
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/', //这里是浏览器上显示的后缀
name: '登录页',
component: () =>
import('@/components/login'), //这里是对应当前文件的实际文件位置
},
]
})
跳转链接
<router-link to="/exit/chaxun
style="color:white; text-decoration: none;">表格查询</router-link>//相当于A链接 to后面跟的地址需要在index.js里面注册
{
path: "/exit/chaxun", //这里只是浏览器后缀 可自定义
component: () =>
import("@/home/zque") //这里是对应当前文件的实际文件位置 引用方式和A标签差不多 @相当于../
},
过滤器替换页面上不想显示的文本
某些时候我们不想显示全部数据 比如银行卡号只显示后4位
用这种方法 就可以只显示后4位了
{{cardNo | cardNofilter}}
//方法写在script里面
export default {
data() {
return {
cardNo:123456789123465789,
};
},
filters: {
cardNofilter(value) {
if (value) {
var reg = /.*(.{4})$/;
return value.replace(reg, "***************$1");}}},
}