二八中医
二八中医
  • 发布:2017-09-06 09:29
  • 更新:2018-08-30 13:39
  • 阅读:20523

怎么搭建vue和Mui的多页面开发环境

分类:MUI

现在有很多的打包工具可以选择,grunt,gulp,webpack等等。vue官方建议是使用webpack,而且webpack相对其他打包工具的好处是代码动态编译,可以根据需要提取出公共部分的代码。因此我们也选择webpack作为打包工具。

目录结构

alt

开发目录 src
  1. assets 静态资源,如图片等的保存
  2. css 样式文件,css,less等
  3. fonts 字体文件,根据需要添加自定义字体
  4. js js框架,公共部分代码,自定义组件等
    5.view html页面文件,页面入口js文件
build 打包参数配置

主要用于对打包过程的控制

  1. webpack.base.conf.js 基础配置参数,开发和生成代码打包共用
  2. webpack.dev.conf.js 开发环境下的打包参数配置
  3. webpack.prod.conf.js 生产环境的打包参数配置
config 打包模式配置

主要是打包相关的基础参数配置,如文件存放目录,打包后的访问根目录,是否压缩等

assets 生产环境下的js/css/图片等文件保存路径

可在config中指定

view 生产环境下的页面文件Html保存路径

和src/view下的html文件一一对应

package.json 打包的环境依赖配置

使用方式

  1. 开发 npm run dev 开启本地web服务,方便调试页面和代码

  2. 生产环境打包 npm run build 将src下的代码打包到根目录下的 assets和view目录下

功能

  1. 支持vue开发的调试,支持webpack打包的调试和自动更新,不需要手动刷新代码

  2. 支持代码和语法检查,可在根目录的.eslintrc下配置检查规则

3.支持webpack的多页面(多入口)开发,相比单入口模式,逻辑更清楚

使用说明

1.view下的页面必须放在view的下级目录,比如view/index/index.html,同时每个页面文件必须搭配一个同名的js文件作为页面入口,比如view/index/index.js

2.可根据需要配置本地调试服务器的端口,默认8000,
在config/index下配置

3.可配置打包路径等,同样在config/index下配置

初始化说明

  1. 在根目录下执行 npm install (如果不是root用户的话,sudo npm install)

  2. 打包或者调试时,如果npm 命令提示错误,一般是某个模块未安装,可执行 npm install ***(模块名称) 安装相关模块

  3. npm run dev (调试)

  4. npm run build (正式打包)

下载完整目录

原文链接:https://blog.betweenfriends.cn/post/howtodevwithvueandmui.html

1 关注 分享
lhyh

要回复文章请先登录注册

DCloud_heavensoft

DCloud_heavensoft

目前DCloud已经出了vue整合方案,即uni-app。性能体验更好,还可以跨端到微信小程序
2018-08-30 13:39
jwenlee

jwenlee

我用 https://tyaqing.github.io/mogo-h5plus/
2018-08-30 10:04
7***@qq.com

7***@qq.com

说了些不痛不痒的,没有干货
2018-08-30 06:50
freedemon

freedemon

回复 二八中医 :
好的,很期待。
2017-09-06 10:24
二八中医

二八中医 (作者)

环境搭好是第一步,至于Mui,其实在webpack里面也只是一个三方框架,
按照webpack的三方框架导入方法引入js即可,
mui与vue目前兼容性一般,问题只有碰到后再想办法解决,
更详细的完整框架和代码后续会慢慢增加,因现有项目的源码不能随便
共享,所以只是先上传了项目框架,后续会有补充
2017-09-06 10:21
freedemon

freedemon

我异常兴奋地点了一下,发现你却是语尽不详。你文章介绍是目录以及webpack的常用操作,真正mui与vue-cli的结合没指出来。
2017-09-06 10:14