正式开始
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. 运行项目之后,会看到以下界面,恭喜你,项目环境搭建成功
3. 根据<a href="#content ">项目结构</a>,构建项目目录
- src/page/ -------------存放视图页面的目录
- activeManage/ --------------------活动管理
- index.vue ------------------------活动管理列表页
- detail.vue ------------------------活动管理详情页
- page1/2/3/4/5 -------------------分别对应:活动管理/报名管理/签到/数据统计/评价管理
- activePublic/ -----------------------活动发布
- index.vue -----------------------活动发布首页
- step1/2/3/4 --------------------分别对应:步骤一/二/三/四
- activeManage/ --------------------活动管理
4. 搭建项目的首页
项目首页由顶部导航栏,左侧导航栏,中间内容区构成,如图
4.1 安装element-ui
$ npm i element-ui@1.0.9
建议固定vue和element-ui的版本,避免将来版本升级后产生冲突
4.2 引入element-ui
在main.js引入element-ui,然后就可以在其他任何页面中使用了
import Element from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(Element)
作者:拯救地球一号
链接:http://www.jianshu.com/p/d87d7140944e
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。