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)