webpack整合 vue-router
结构
文件内容
各个文件内容,一共八个文件, 还有src
components
目录
Login.vue
1 | <template> |
Register.vue
1 | <template> |
App.vue
1 | <template> |
index.html
1 |
|
main.js
1 | import Vue from 'vue' |
.babelrc
1 | { |
package.json
1 | { |
webpack.config.js
1 | //webpack是基于node进行构建的,所以支持node语法 |
安装依赖
- 执行 在项目的目录下执行
npm i
来安装所需的依赖
执行
- 执行
npm run dev
,无错误,但是没有显示index.html
中我们设置的两个router-link
链接和router-view
坑原因
- 原因是因为
render会把 el 指定的所有内容都清空,再添加 app 组件
,所以,我们需要把这三个标签放入App.vue
中修改了index.html
修改App.vue
- 修改
App.vue
再执行
- 执行
npm run dev
也成功显示了两个链接
点击登录
- 点击了
登录
之后
点击注册
- 点击了
注册
之后
创建Daniu.vue
和 Erdan.vue
- 在
components
目录下创建两个文件Daniu.vue
和Erdan.vue
,并且修改了main.js
和Login.vue
修改Daniu.vue
Daniu.vue
1 | <template> |
Erdan.vue
Erdan.vue
1 | <template> |
修改main.js
main.js
1 | import Vue from 'vue' |
修改Login.vue
Login.vue
1 | <template> |
再执行,测试
- 执行
npm run dev
- 点击
登录
- 点击
注册
- 点击
登录
再点击大牛
- 点击
登录
再点击二蛋
- 实现抽离模块,在
src
目录下创建文件router.js
,把main.js
中关于路由的数据放到router.js
router.js
1 | import VueRouter from 'vue-router' |
main.js
1 | import Vue from 'vue' |
webpack 整合 Mint UI
安装
执行
npm i mint-ui -S
引入
在
main.js
中添加
1 | import MintUI from 'mint-ui' |
使用
添加
Mint UI
的样式
执行
执行
npm run dev
webpack 整合 MUI
下载
因为它不是
npm
下载的,所有要去GitHub
去下载 点击进入
解压
在
src
目录下,新建目录lib
,把解压之后的dist
文件夹 复制到lib
下,并改名为mui
引入
使用方法和
bootstrap
差不多,在main.js
中添加import './lib/mui/css/mui.min.css'
使用
在
App.vue
中添加
1 | <button type="button" class="mui-btn">默认</button> |