【功能实现】vue搭建基础项目vue2.0

功能简介

这里使用的编译器是HbuiderX，跳过了执行cli脚手架的步骤，这篇博客主要是记录如何引用vue-router，以及部分自己想添加的组件，这里项目我添加了Ant design、TDsign、less，axios等常用编程组件。

代码实现

npm下载

我们使用npm将自己所需的组件库下载到了node_moudles里面，这里可以通过项目文件夹下的package.json查看

main.js

在main.js里面引入使用的包并注册

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false

// antd
//引入
import Antd from 'ant-design-vue';
//引入样式包
import 'ant-design-vue/dist/antd.css';
//使用
Vue.use(Antd);
import '@ant-design/icons-vue'
//less
import less from 'less'
Vue.use(less)
//TDesign
import TDesign from 'tdesign-vue';
import 'tdesign-vue/es/style/index.css';
Vue.use(TDesign);
//路由
import router from './router/index'
//路由守卫
router.beforeEach((to,from,next)=>{
	const token = localStorage.getItem('token')
	判断是否登录
if(token){
	next();
}else{
	//跳转到默认界面（一般为登录），并把本身跳转的路由告诉这个界面
	next(`/index?redirect=${to.path}`);
}
  
})
//注册
new Vue({
	router,
	render: h => h(App),
}).$mount('#app')

路由

import router from 'vue-router'
import Vue from 'vue'
//引入组件
import index from '@/views/index.vue'
Vue.use(router)

export default new router({
    routes: [
		//这里第一个是重定向
		{
			path: '/',
			redirect:'testDebounce'
		},
		//创建路由
		{
			path:'/index',
			component:index
		}
    ]
})