搭建中台-管理平台vue项目UI

[reng99]

本文一步一步讲解搭建的全过程，结合的是Ant Design，非详细版本，会在文末给出搭建的效果图～

进入正题啦，下午还有节目呢～

vue-cli@3创建项目

vue-cli

1. 安装脚手架

   $ npm install -g @vue/cli
   # OR
   $ yarn global add @vue/cli

2. 创建一个项目

   $ vue create antd-demo

引入vue.config.js的配置

文件内容的demo如下：

module.exports = {
	css: {}
}

引入vue-router

1. 安装vue-router

   npm install --save vue-router

2. src下面新建router/index.js

   import Vue form 'vue'
   import Router from 'vue-router'
   Vue.use(Router)
   const router = new Router({
   	routes: [
   		{
   			path: '/',
   			name: 'index',
   			component: resolve => require(['@/views/index'], resolve),
   			meta: { name: '首页' }
   		}
   	]
   })
   

3. 在main.js中添加router

   import VueRouter from 'vue-router'
   import router from './router/index'
   
   Vue.use(VueRouter)
   
   new Vue({
     router,
     render: h => h(App),
   }).$mount('#app')

4. 在入口的app.vue中添加router-view

   <template>
     <div id="app">
       <router-view/>
     </div>
   </template>
   

支持less

1. 安装less和less-loader

   npm install --save-dev less less-loader

2. 在vue.config.js上配置支持

   css: {
       loaderOptions: {
           less: {
               modifyVars: {
                   blue: '#3a82f8',
                   'text-color': '#333'
               },
               javascriptEnabled: true
           }
       }
   },
   

3. 使用时候要注明lang='less'

   <style scoped lang='less'>
   #index {
     h1 {
       background: blue;
     }
   }
   </style>

引入vue-anti-design

vue-anti-design地址

1. 安装

   $ npm i --save ant-design-vue

2. main.js中完整引入

   import Vue from 'vue'
   import Antd from 'ant-design-vue'
   import App from './App'
   import 'ant-design-vue/dist/antd.css'
   Vue.config.productionTip = false
   
   Vue.use(Antd)
   
   /* eslint-disable no-new */
   new Vue({
     el: '#app',
     components: { App },
     template: '<App/>'
   })
   

引入vuex

1. 安装vuex

   npm install vuex --save

2. 新建一个store/index.js

   import Vue from 'vue'
   import Vuex from 'vuex'
   
   Vue.use(Vuex)
   
   const store = new Vuex.Store({
       state: {},
       mutations: {},
       actions: {},
       modules: {},
       getters: {}
   })
   
   export default store

3. 在main.js中引入vuex

   import store from './store/index'
   new Vue({
     store,
     render: h => h(App)
   }).$mount('#app')

效果图

搭建的项目是响应式的，效果图这里我放上desktop版和mobile版：

desktop版

mobile版

参考和后话

更多的内容，请戳我的博客进行了解，能留个star就更好了💨