Vue做项目必备（节省80%时间，持久更新，不讲武德）

目录

1.iconfont

2. sass版本问题

3.屏幕高宽度自适应

4. 跨域

5. 拦截器

 6.项目插件安装

7.登录鉴权（单路由）

8.插件引入、持久化、字体图标、富文本、时间戳

9. 跳转、返回、前进和后退

10.echarts图表的使用

11. vue组件中引入js文件(放script中)

 12.vue组件中引入css文件（放style中）

 13.插槽

 14.vue六种传值方式（属性传值、$refs、$parent、通知传值(广播传值)、本地传值、路由传值）

 15.增删改查

 16.登录+验证规则+重置

17.模拟数据

 18.电话邮箱正则验证

19.dialog弹框（可用于增删改查）

 20.登录的盒子居中

21.api封装

---

Vue脚手架中盒子高度设置问题：height:100vh;      //es6语法

0.创建项目准备

检查是否安装成功：如果输出版本号，说明我们安装node环境成功

node -v 

npm -v

全局安装@vue/cli

npm install -g @vue/cli
检查是否安装成功：如果输出版本号，说明我们安装node环境成功

vue --version

创建项目

vue create test_vue

1.iconfont

<template>
	<div>
		<ul>
			<!-- 方法一： -->
			<li><span class="iconfont">&#xe62f;&#xe644;&#xe616;</span></li><br>
			<li><span class="iconfont">&#xe644;</span></li>
			<li><span class="iconfont">&#xe616;</span></li>
			<!-- 方法二 -->
			<i class="iconfont icon-caidan"></i>
			<i class="iconfont icon-jiazai1"></i>
			<i class="iconfont icon-shangchuan"></i>
			
			
		</ul>
	</div>
</template>

<script>
	import iconfont from '../myicon/icon-font/download/font_20dtp1i3pv6/iconfont.css'
	export default {
		
	}
</script>
  
<style scoped>
	li>span{
		width: 50px;height: 50px;
		float: left;
	}
</style>

2. sass版本问题

1、vue中sass安装使用============================================================
方法一：

我本地是将    "sass-loader": "^8.0.0"，更换成了 "sass-loader": "^7.3.1",

卸载当前版本   npm uninstall sass-loader
安装     npm install sass-loader@7.3.1 --save-dev

方法二：

如若不行，此时运行按照提示执行  npm rebuild node-sass  命令

（如若还不行，则先运行npm install node-sass命令执行）

3.屏幕高宽度自适应

mounted() {
		// 调用自动调节
		this.fc_height();
	},
	methods: {
		// 获取屏幕宽高自动调节
		fc_height() {
			let html = document.documentElement || document.body;
			let height = html.clientHeight - 60;
			let aside = document.querySelector('.el-aside');
			aside.style.height = height + 'px';
		}
	}

4. 跨域

proxyTable: {
			'/admin': { //代理api
				target: 'http://ceshi5.dishait.cn/admin', //服务器api地址
				ws: true, // proxy websockets
				changeOrigin: true, //是否跨域
				pathRewrite: { //重写路径
					'^/admin': ''
				}
			}
		},

5. 拦截器

//添加请求拦截器
axios.interceptors.request.use(config => {
  console.log(config)
  // 从sessionStorage获取token值，然后设置给请求头
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // 在最后必须 return config
  return config
})

 6.项目插件安装

npm i element-ui -S                
npm install axios --save      
npm install echarts --save        
npm install vant --save   
npm install vuex -s
cnpm install node-sass@4.14.1 sass-loader@7.3.1 -s

7.登录鉴权（单路由）

		beforeEnter(to,from,next){
			if(sessionStorage.getItem("token")){
				next()
			}else {
			   alert("请先登录");
			   next('/')
			}
		},

8.插件引入、持久化、字体图标、富文本、时间戳

// 引入vuex
import Vuex from 'vuex';

// 持久化=====================================================================
import VuexPersistence from 'vuex-persist'         //store中引入
const vuexLocal = new VuexPersistence({            //store中引入
    storage: window.localStorage
})


plugins: [vuexLocal.plugin]                    //store中引入


cnpm install --save vuex-persist               //下载


// 引入vant组件====================================================================
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);


// 引入第三方控件[分类参数]===============================================
npm i vue-table-with-tree-grid -S     //下载

import TreeTable from 'vue-table-with-tree-grid'    //在main.js中使用
Vue.config.productionTip = false               //在main.js中使用
//全局注册组件===============================================
Vue.component("tree-table", TreeTable)

// 导入字体图标===============================================
import './assets/fonts/iconfont.css'
// 导入富文本编辑器（用法）===============================================
import VueQuillEditor from 'vue-quill-editor'
// require styles 导入富文本编辑器对应的样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

// 将富文本编辑器，注册为全局可用的组件===============================================
Vue.use(VueQuillEditor)


// 时间戳转换===============================================
Vue.filter('dateFormat', function(originVal) {
	const dt = new Date(originVal)

	const y = dt.getFullYear()
	const m = (dt.getMonth() + 1 + '').padStart(2, '0')
	const d = (dt.getDate() + '').padStart(2, '0')

	const hh = (dt.getHours() + '').padStart(2, '0')
	const mm = (dt.getMinutes() + '').padStart(2, '0')
	const ss = (dt.getSeconds() + '').padStart(2, '0')

	return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})


// 引入ElementUI组件===============================================
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

//Echarts图表引入===============================================
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

//引入axios和配置请求根路径============================================