年前由于时间紧迫,原本使用iview技术开发后台管理系统的大神另有任务,我中途接手该项目,此前对于iview一无所知的我是一脸的懵逼,好在后台管理的整体框架大神已经搭建好了,而我之前对vue也有一定的了解,因此我只需要写一些页面以及数据的对接等。
中间踩过许多坑,遇到许多不接,最后在多番查询资料以及大神的指导下,最后总算完成了这项艰巨的任务,在这段时间里,我也学到了许多东西。这里抽空整理一下。
既然是写后台管理,那么首先要做的应该是环境的搭建,由于搭建环境中需要用到npm包管理工具,因此需要安装nodejs(可以去 nodejs官网 下载)。
预览下项目最终文件夹:
最终效果:
1、全局安装vue-cli脚手架
npm install -g vue-cli
2、创建一个基于webpack模版的新项目。如:
vue init webpack my-project (其中,my-project为项目名)
3、打开项目,这里以my-project为例
cd my-project
4、安装项目相关依赖包(也可以使用cnpm来安装,速度更快,执行npm install -g cnpm --registry=https://registry.npm.taobao.org,然后就可以使用cnpm来替代npm了)。
npm install
执行完以上步骤,项目大致文件夹如下:
5、安装iview
npm install iview --save
6、在src/main.js文件中引入iview,引入后的main.js文件代码如下(红色部分为新加的部分):
import Vue from 'vue'
import App from './App'
import router from './router'
import iView from 'iview'
import 'iview/dist/styles/iview.css' // 使用 CSS
Vue.config.productionTip = false
Vue.use(iView) // 必不可少的
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
7、安装vuex。
由于应用中会遇到多个组件共享状态的情况,因此我们需要把组件的共享状态抽取出来,以一个全局单例模式管理,这时候就需要vuex了,说了这么多,那么什么是vuex呢?vuex是一个专门为vue.js设计的集中式状态管理架构,可以理解为在data中的属性需要共享给其他vue组件使用的部分 。简单的说就是data中需要共用的属性。
npm install vuex --save (因为在生产环境中也要用到该包,所以--save别忘了)
8、在src文件夹下新建store文件夹,并在新建文件夹下创建store.js文件,在文件中引入vue和vuex
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
9、在iview中切换页面需要使用到路由,因此需要在src => router => index.js 中配置相关页面的路由,这里以上面最终的实现效果为例来进行配置
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import novelList from '@/components/novelList'
import hello from '@/components/hello'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
children: [
{
path: '/hello',
name: 'hello',
component: hello
}, {
path: '/novelList',
name: 'novelList',
component: novelList
}
]
}
]
})
10、src/store/store.js文件配置如下:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
menus: [
{
'menuId': '1',
'name': 'welcome',
'subMenus': [
{
'menuId': '1-1',
'name': '欢迎',
'menuUrl': 'Hello'
}
]
},
{
'menuId': '2',
'name': '小说管理',
'subMenus': [
{
'menuId': '2-1',
'name': '小说列表',
'menuUrl': 'novelList'
}
]
}
]
}
});
11、 修改main.js文件,修改后如下(红色部分为新加的):
import Vue from 'vue'
import App from './App'
import router from './router'
import iView from 'iview'
import 'iview/dist/styles/iview.css' // 使用 CSS
import store from './store/store'
Vue.config.productionTip = false
Vue.use(iView) // 必不可少的
new Vue({
el: '#app',
store,
router,
components: { App },
template: '<App/>'
})
12、别忘了新建HelloWorld.vue、hello.vue、novelList.vue文件。
最后就可以执行npm run dev,然后在浏览器中输入http://localhost:808来运行项目了,端口号默认为8080,可以在config文件夹下的index.js文件中修改端口号和ip