Vue + Element-UI项目搭建

技术文章 1年前 (2020) 完美者
627 0

标签:安装   try   查询   ati   family   res   col   代码   blog   

一、环境搭建

1、安装node (node -v查询版本号)

node 安装 ---- 官网下载安装

 

2、安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

 

3、安装 webpack,以全局的方式安装

npm install webpack -g

 

4、全局安装vue以及脚手架vue-cli(3.0以后使用的不是vue-cli,之前已经安装vue-ci的,需要先执行 npm uninstall vue-cli -g 进行卸载

npm install @vue/cli -g --unsafe-perm (使用 @vue/cli -V 查询版本号)

 

5、创建vue项目 element-manage-system是你起的项目名称

vue create element-manage-system (出现选项让选择,根据需要选择创建)

技术图片

 

 见到这个提示就表示已经创建成功啦

 

6、运行当前项目 这个整个项目就搭建好了

npm run serve

技术图片

 

服务起来了,这是可以在浏览器看一下页面,完美

技术图片

 

 

二、项目初期搭建

 上面已经正常启动了项目,下面说明一下公共配置

1、main.js(主文件)

import Vue from ‘vue‘
import App from ‘./App.vue‘
import router from ‘./router‘ //引入 vue-router
import store from ‘./store‘ //引入 vuex
// 全局配置
import ‘@/assets/scss/reset.scss‘ //全局样式
import ‘element-ui/lib/theme-chalk/index.css‘ //element-ui样式
import http from ‘@/api/config‘ //axios
import ‘./mock‘ // mockjs
// 第三方包
import ElementUI from ‘element-ui‘
Vue.use(ElementUI)
Vue.prototype.$http = http
Vue.config.productionTip = false
  new Vue({
  router,
  store,
  render: h => h(App)
}).$mount(‘#app‘)

 

2、router(路由跳转配置)

router作用:简单理解就是帮助组件之间跳转用的。

这里为了性能都采用懒加载,还有这里不管先登陆登陆页面 默认跳转组件为 Main.vue

import Vue from ‘vue‘
import VueRouter from ‘vue-router‘
Vue.use(VueRouter)

// 完整路由代码
export default new VueRouter({
  routes: [
    {
      path: ‘/‘,
      component: () => import(‘@/views/Main‘),
      children: [
        {
          path: ‘/‘,
          name: ‘home‘,
          component: () => import(‘@/views/Home/Home‘),
        },
        {
          path: ‘/user‘,
          name: ‘user‘,
          component: () => import(‘@/views/UserManage/UserManage‘),
        },
        {
          path: ‘/mall‘,
          name: ‘mall‘,
          component: () => import(‘@/views/MallManage/MallManage‘),
        },
        {
          path: ‘/page1‘,
          name: ‘page1‘,
          component: () => import(‘@/views/Other/PageOne‘),
        },
        {
          path: ‘/page2‘,
          name: ‘page2‘,
          component: () => import(‘@/views/Other/PageTwo‘),
        },
      ]
    }
  ]
})

 

3、vuex(存储共享数据)

vuex作用:vuex解决了组件之间同一状态的共享问题。

export default {
  //存储数据
  state: {
    isCollapse: false
  },
  //调用方法
  mutations: {
    collapseMenu(state) {
      state.isCollapse = !state.isCollapse
    }
  },
  actions: {}
}

 

4、axios

axios作用:axios主要是用于向后台发起请求的,还有在请求中做更多是可控功能。

import axios from ‘axios‘

// 创建一个axios实例
const service = axios.create({
  // 请求超时时间
  timeout: 3000
})

export default service

 

基本的配置就完成了,下面可以开始进行开发啦

 

Vue + Element-UI项目搭建

标签:安装   try   查询   ati   family   res   col   代码   blog   

原文地址:https://www.cnblogs.com/DeryKong/p/13646736.html

版权声明:完美者 发表于 2020-09-17 21:04:48。
转载请注明:Vue + Element-UI项目搭建 | 完美导航

暂无评论

暂无评论...