vue-cli搭建一个新项目及基础配置
一、安装步骤
1.安装node环境:下载地址:Node.js
2.安装脚手架:npm install -g @vue/cli
3.创建vue项目:vue create +项目名
4.进入项目:cd+项目名
5.安装vue-router:npm install vue-router --save
安装路由出现报错指定一个路由的版本去安装: npm install vue-router@3.5.3 --save
6.安装element:推荐使用 npm 的方式安装 npm i element-ui -S
二、main.js配置
import Vue from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import '@/assets/css/common.scss'
import '@/assets/css/customElementUI.scss'
import '@/assets/css/initialization.css'
import '@/assets/tool/rem.js' //自适应
import './svgIcons/svg.js'
Vue.config.productionTip = false
Vue.use(ElementUI)
// 未登录返回登录页
router.beforeEach((to, from, next) => {
/* 判断该路由是否需要登录权限 */
if (to.matched.some(record => record.meta.requireAuth)) {
//是否登录
setTimeout(function () {
if (window.localStorage.getItem('token')) {
// 已登录
next()
} else {
next({ path: '/login?again=0' })
}
}, 100)
}
next()
})
// 每次翻页时从顶部开始
router.afterEach((to, from, next) => {
window.scrollTo(0, 0)
})
new Vue({
el: '#app',
store,
router,
template: '<App/>',
components: { App },
})
三、router下的index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
export default new VueRouter({
mode: 'hash',
routes: [
{
path: '/',
redirect: '/login',
},
{
path: '/login',
component: () => import('@/views/login/loginIndex.vue'),
meta: {
title: '登录',
},
},
{
path: '/home',
component: () => import('@/views/home/homeIndex.vue'),
meta: {
requireAuth: true,
},
children: [
{
path: '/home/projectManagement',
component: () => import('@/views/home/project/projectManagement.vue'),
},
],
},
],
})
链接: [https://blog.csdn.net/weixin_58431406/article/details/125204580(https://blog.csdn.net/weixin_58431406/article/details/125204580)