上一篇分享的是使用angularjs及materialdesign的管理后台前端页面的实现。因为感觉input的输入框实在是太丑了,并且用户端的页面我早已开发完毕,就等着后端给接口了,所以就萌生出了使用心中一直念念不忘的Vuejs来实现一版管理后台。
这个使用了Vue-cli来构建vue架构,使用vue-router来搭建路由,使用iview来作为UI框架。
项目构建
- 安装nodejs
nodejs安装及常用快捷键
建议安装nvm来控制nodejs的版本,上面的链接里有详细的步骤,包括启动node服务常用的PM2等等… -
全局安装webpack、vue-cli脚手架
npm install -g webpack vue-cli
; -
创建工程
vue init webpack-simple <project name>
这里直接一路回车就可以了。
注意:工程名不能是中文 -
安装项目依赖
进入工程,输入npm install
就可以了。 -
安装路由模块vue-router、网络请求模块vue-resource模块
npm install --save vue-router vue-resource
这个会安装到package.json
的dependencies
中。 -
安装UI框架 iView
npm install --save iview
-
使用iView、vue-router、vue-resource
# main.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import VueResource from 'vue-resource';
import iview from 'iview';
import 'iview/dist/styles/iview.css';
import App from './App.vue';
Vue.config.debug = true;
Vue.use(VueRouter);
Vue.use(VueResource);
Vue.use(iview);
- 修改webpack.config.js配置文件
因为使用iView需要引用其css,但是最初的webpack.config.js文件里面并没有配置读取css文件和字体文件或者有的设定的有问题,所以这里需要我们自行修改一下:
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.(eot|woff|woff2|ttf)([\\?]?.*)$/,
loader: "file-loader"
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}