导语
本次将会从头到尾详解，怎样使用vue和ElementUI快速开发后台管理系统，以及在开发过程中遇到的一些bug
如果运行时报错，请检查几个包的版本
- node.js 6.10.0
- npm 3.10.10
- vue 2.1.6
- element-ui 1.0.9
项目结构分析
- 活动发布
- 步骤一
- 步骤二
- 步骤三
- 步骤四
- 活动管理
- 列表页
- 活动详情页
- 活动详情
- 步骤一
- 步骤二
- 步骤三
- 步骤四
- 报名管理
- 签到
- 数据统计
- 评价管理
- 活动详情
- 活动详情页
开发前准备
开发前，请先熟悉下面的4个文档
- vue.js2.0中文,项目所使用的js框架
- vue-router,vue.js配套路由
- vuex，状态管理
- Element，UI框架
正式开始
1. 根据官方指引，构建项目框架
# 安装vue
$ npm install vue@2.1.6
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目my-project
$ vue init webpack my-project
# 进入项目目录
$ cd my-project
# 安装依赖，走你
$ npm install
# 运行项目
$ npm run dev
2. 运行项目之后，会看到以下界面，恭喜你，项目环境搭建成功
normal.png
3. 构建项目目录,新建一些页面
menu.png
- src/page/ -------------存放视图页面的目录
- activeManage/ --------------------活动管理
- index.vue ------------------------活动管理列表页
- detail.vue ------------------------活动管理详情页
- page1/2/3/4/5 -------------------分别对应：活动管理/报名管理/签到/数据统计/评价管理
- activePublic/ -----------------------活动发布
- index.vue -----------------------活动发布首页
- step1/2/3/4 --------------------分别对应：步骤一/二/三/四
- activeManage/ --------------------活动管理
4. 搭建项目的首页
项目首页由顶部导航栏，左侧导航栏，中间内容区构成，如图
后台管理系统封面.png
4.1 安装element-ui
$ npm i element-ui@1.0.9
建议固定vue和element-ui的版本，避免将来版本升级后产生冲突
4.2 引入element-ui
在app.vue引入element-ui，然后就可以在其他任何页面中使用了
import Element from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(Element)
4.3 使用element-ui
将app.vue改为以下内容
<template>
<div id="app">
<!-- 头部导航 -->
<header class="header">
<el-row>
<el-col :span="24">
<el-menu default-active="5" class="el-menu-demo" mode="horizontal" @select="">
<el-menu-item index="1">高级插件</el-menu-item>
<el-menu-item index="2">在线商城</el-menu-item>
<el-menu-item index="3">客户管理</el-menu-item>
<el-menu-item index="4">系统设置</el-menu-item>
<el-menu-item index="5">活动发布</el-menu-item>
</el-menu>
</el-col>
</el-row>
</header>
<div style="position: relative;height: 60px;width: 100%;"></div>
<main>
<!-- 左侧导航 -->
<div class="main-left">
<el-menu default-active="/activePublic" class="el-menu-vertical-demo" :router="true">
<el-menu-item index="/activePublic" :class="{'isActive': active}">活动发布</el-menu-item>
<el-menu-item index="/activeManage" :class="{'isActive': !active}">活动管理</el-menu-item>
</el-menu>
</div>
<!-- 右侧主内容区 -->
<div class="main-right" >
</div>
</main>
</div>
</template>
<script>
import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(Element)
export default {
name: 'app',
data: function (){
return {
active:true
}
}
}
</script>
<style>
body{margin: 0;}
#app {
min-width: 1200px;
margin: 0 auto;
font-family: "Helvetica Neue","PingFang SC",Arial,sans-serif;
}
/* 头部导航 */
header{z-index: 1000;min-width: 1200px;transition: all 0.5s ease; border-top: solid 4px #3091F2; background-color: #fff; box-shadow: 0 2px 4px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04); }
header.header-fixed{position: fixed;top: 0;left: 0;right: 0;}
header .el-menu-demo{padding-left: 300px!important;}
/* 主内容区 */
main{ display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 800px; border: solid 40px #E9ECF1; background-color: #FCFCFC; }
main .main-left{text-align: center;width: 200px;float: left;}
main .main-right{-webkit-box-flex: 1; -ms-flex: 1; flex: 1; background-color: #fff; padding: 50px 70px; }
main .el-menu{background-color: transparent!important;}
</style>
4.4 预览项目,看到如图所示页面，项目的首页就搭建好了
$ npm run dev
首页.png
4.5 如果运行上面出现问题,可以直接克隆项目
# 克隆项目
git clone https://github.com/WebCodeFarmer/houtai.git
# 查看目录
ls
# 进入项目目录
cd houtai
# 安装开发依赖,推荐使用npm安装，cnpm可能会丢包，或者各种兼容性问题
npm install
# 运行
npm run dev
# 打包压缩
npm run build
下一篇，活动发布
网友评论
在eslintrc.js中rules添加
// 关闭代码规范检测
'no-tabs': 'off',
'no-trailing-spaces': 'off',
'indent':'off',
'space-before-function-paren':'off',
'eol-last':'off'
暂时解决报警告的问题
at VueComponent.routeToItem (element-ui.common.js?ca74:4180)
at VueComponent.boundFn [as routeToItem] (vue.esm.js?a915:188)
at VueComponent.handleItemClick (element-ui.common.js?ca74:4155)
at VueComponent.boundFn [as handleItemClick] (vue.esm.js?a915:188)
at VueComponent.Vue.$emit (vue.esm.js?a915:2496)
at VueComponent.dispatch (emitter.js?507c:29)
at VueComponent.boundFn [as dispatch] (vue.esm.js?a915:187)
at VueComponent.handleClick (element-ui.common.js?ca74:4818)
at boundFn (vue.esm.js?a915:188)
at invoker (vue.esm.js?a915:1986)
楼主知道这是什么问题吗0.0
test:/\.(eot|ttf|woff|woff2)$/,
loader:'file-loader'
}
ERROR Failed to compile with 1 errors 16:08:34
This dependency was not found:
* element-ui/lib/theme-default/index.css in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/App.vue
To install it, you can run: npm install --save element-ui/lib/theme-default/index.css
Configuration for rule "no-multi-spaces" is invalid:
Value "data["0"].ignoreEOLComments" has additional properties.
这个报错是因为eslint规则原因么
这是把你的抄走了吗。。。
C:\Users\mmeng\Desktop\vue\vue-jianshu>cd my-project
C:\Users\mmeng\Desktop\vue\vue-jianshu\my-project>npm install
> phantomjs-prebuilt@2.1.14 install C:\Users\mmeng\Desktop\vue\vue-jianshu\my-project\node_modules\phantomjs-prebuilt
> node install.js
PhantomJS not found on PATH
Downloading https://github.com/Medium/phantomjs/releases/download/v2.1.1/phantomjs-2.1.1-windows.zip
Saving to C:\Users\mmeng\AppData\Local\Temp\phantomjs\phantomjs-2.1.1-windows.zip
Receiving...
[===-------------------------------------] 9%
This dependency was not found:
* vue in ../~/element-ui/lib/element-ui.common.js, ../~/element-ui/lib/locale/in
dex.js and 1 other
To install it, you can run: npm install --save vue
vue和element的版本也是和作者一样的。我看node_modules文件中已经包含了element-ui了。查看了无法找到的几个文件在element-ui中都有。请问哪里出错了呢？
router-config.js文件
要引入这个文件
import OACustomerdetails from './page/OACustomerdetails.vue'
在export default [ ]处加上：
{
path: '/components', component: OACustomerdetails,
children:[
{ path: '' , component: OACustomerdetails },
{ path: 'OACustomerdetails', component: OACustomerdetails }
]
}
我试了下
<router-link to="/OACustomerDetail">点我跳转</router-link>
但是不起效果。。可以帮忙解决一下吗？
ERROR Failed to compile with 1 errors 13:38:37
error in ./~/element-ui/lib/theme-default/index.css
Module build failed: Unknown word (5:1)
3 | // load the styles
4 | var content = require("!!../../../css-loader/index.js?{\"minimize\":false,
\"sourceMap\":false}!./index.css");
> 5 | if(typeof content === 'string') content = [[module.id, content, '']];
| ^
6 | if(content.locals) module.exports = content.locals;
7 | // add the styles to the DOM
8 | var update = require("!../../../vue-style-loader/lib/addStylesClient.js")(
"0cd55501", content, false);
@ ./~/element-ui/lib/theme-default/index.css 4:14-141 18:2-22:4 19:20-147
@ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src
/App.vue
@ ./src/App.vue
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js
> Listening at http://localhost:8080
./~/element-ui/lib/theme-default/fonts/element-icons.eot?t=1472440741
Module parse failed: E:\HONGYUN\vuedemo01\node_modules\element-ui\lib\theme-default\fonts\element-icons.eot?t=1472440741 Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./~/css-loader!./~/element-ui/lib/theme-default/index.css 6:1015-1064
@ ./~/element-ui/lib/theme-default/index.css
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
(Emitted value instead of an instance of Error)
Error compiling template:
<div class="activePublic ">
<!-- element步骤组件 -->
<el-steps :space="200" :active="step" class="step">
<el-step title="活动信息" description=""></el-step>
<el-step title="报名签到" description=""></el-step>
<el-step title="分享设置" description=""></el-step>
<el-step title="个性设置" description=""></el-step>
</el-steps>
- tag <div> has no matching end tag.
@ ./src/page/activePublic/index.vue 5:2-200
@ ./src/router-config.js
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js
error in ./src/App.vue
Syntax Error: Unexpected token {
@ ./~/vue-style-loader!./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style-compiler?{"id":"data-v-46e720b8","scoped":false,"hasInlineConfig":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-303 13:3-17:5 14:22-311
@ ./src/App.vue
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js
error in ./src/components/Hello.vue
Syntax Error: Unexpected token {
@ ./~/vue-style-loader!./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style-compiler?{"id":"data-v-7e89075c","scoped":true,"hasInlineConfig":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/Hello.vue 4:14-313 13:3-17:5 14:22-321
@ ./src/components/Hello.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js
我安装很多次了，都报这个错误，一直没找到原因，求大神指点
✘ http://eslint.org/docs/rules/ Parsing error: Unexpected character '，'
1 | /* HTML */
2 | export default {
> 3 | name: 'app'，
| ^
4 | data: function (){
5 | return {
6 | active:true
F:\case\vue-demo\my-project\src\App.vue:38:14
name: 'app'，
^
✘ 1 problem (1 error, 0 warnings)
Errors:
1 http://eslint.org/docs/rules/null
@ ./src/main.js 3:0-24
@ multi ./build/dev-client ./src/main.js
ERROR in ./~/.6.4.0@babel-loader/lib!./~/.11.1.4@vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
Module build failed: SyntaxError: F:/case/vue-demo/my-project/src/App.vue: Unexpected character '，' (38:13)
36 |
37 | export default {
> 38 | name: 'app'，
| ^
39 | data: function (){
40 | return {
41 | active:true
@ ./src/App.vue 7:2-105
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js
这个是什么错误？我去掉了
data: function (){
return {
active:true
}
}
这个运行就OK了
在app.vue引入element-ui，然后就可以在其他任何页面中使用了。这个地方写错了吧？我看官方文档是main.js引入的。我在main.js引入后，并改了app.vue代码后，报错了，不知道怎么解决。报错提示是：Failed to load resource: the server responded with a status of 404 (Not Found)。项目环境搭建这一步是成功了的。求指点，收徒弟不
```
ERROR Failed to compile with 3 errors
These dependencies were not found in node_modules:
* strip-ansi
* ansi-html
* html-entities
Did you forget to run npm install --save for them?
```
浏览器显示：
```
Cannot GET /
```
$ cnpm install vue@2.1.6
这一步可以不用吧？之后使用 vue-cli 的 webpack 模板后，运行 cnpm install，就会把 package.json 里使用的 vue 版本下载下来。
router,
store,
el: "#app",
render: h => h(App)
}) 这个报错 do not ues 'new' for side effects 然后 store is defined