写在了GitHub
初始化
- 创建一个文件夹
vue-cms
- 在
vue-cms
目录下创建文件package.json
- 在
vue-cms
目录下创建文件webpack.config.js
- 在
vue-cms
目录下创建文件.babelrc
- 在
vue-cms
目录下创建目录src
- 在
src
目录下创建文件index.html
- 在
src
目录下创建文件main.js
- 在
- 在
package.json
1 | { |
webpack.config.js
1 | //webpack是基于node进行构建的,所以支持node语法 |
.babelrc
1 | { |
index.html
1 |
|
main.js
1 | console.log("测试"); |
先执行npm i
来安装依赖
执行npm run dev
控制台无错误,显示 ‘测试’ 就可以了
布置基础模块
引入Mint UI 实现顶部固定栏
index.html
的body
标签中添加<div id="app"></div>
main.js
内容改为
1 | /*Vue*/ |
在src
目录下创建App.vue
内容为
1 | <template> |
执行npm run dev
引入MUI实现底部固定栏
- 首先去GitHub下载
MUI
数据 https://github.com/dcloudio/mui/ - 在
src
目录下创建目录lib
,把解压好的mui-master
下的dist
目录放到项目的lib
包下,并改名为mui
- 把解压好的
mui-master
下的examples
的hello-mui
下的css
的icons-extra.css
文件放入项目mui
下的css
中 - 把解压好的
mui-master
下的examples
的hello-mui
下的fonts
的mui-icons-extra.ttf
文件放入项目mui
下的fonts
中 - 在
main.js
中添加1
2
3/*MUI*/
import './lib/mui/css/mui.min.css'
import './lib/mui/css/icons-extra.css' - 在
App.vue
中的底部
注释下面加1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="#tabbar">
<span class="mui-icon mui-icon-home-filled"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-chat">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">会员</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-contact">
<span class="mui-icon mui-icon-extra mui-icon-extra-cart">
<span class="mui-badge">0</span>
</span>
<span class="mui-tab-label">购物车</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-map">
<span class="mui-icon mui-icon-search"></span>
<span class="mui-tab-label">搜索</span>
</a>
</nav> - 执行
npm run dev
引入
vue-router
- 把
App.vue
中的底部四个 a
标签改为router-link
href
改为to
- 四个
to
的内容依次为