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
1
2
3
4
5
6
7

二、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: '',
    components: { App },
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

三、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'),
                },
            ],
        },
    ],
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

链接: [https://blog.csdn.net/weixin_58431406/article/details/125204580(https://blog.csdn.net/weixin_58431406/article/details/125204580)