本文主要用到框架的：Vue+mint-ui
Vue文档：https://vue.docschina.org/v2/guide
mint-ui文档：http://mint-ui.github.io
第一步：安装
安装vue
npm install -g vue-cli
初始化vue项目
vue init webpack projectname
cd到vue项目下安装依赖
npm install
安装mint-ui
npm install mint-ui --save
至此mint-ui项目已经创建完成了。下面进行项目的一些优化
第二步：优化
这里讲的优化只是在打包发布时的体积优化，将mintUI引入的方式从依赖换成cdn的方式，这样可以减少打包时主包的大小。
build > webpack.base.conf.js
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
//新加的
externals: {
'mint-ui': 'MINT',
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'babel-polyfill': 'window',
},
//新加的
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
main.js
这里不需要引入css文件了。
import MINT from 'mint-ui'
// import 'mint-ui/lib/style.css'
Vue.use(MINT)
index.html
<link rel="stylesheet" href="static/mintUI.css">
<script src="static/vue.js"></script>
<script src="static/polyfill.min.js"></script>
<script src="static/mint-ui.js"></script>
<script src="static/vue-router.js"></script>
<script src="static/vuex.js"></script>
我是将文件资源放在我本地服务器上的，曾经线上网站蹦过，有阴影了。
如果要用线上的，可以这样：
<link rel="stylesheet" href="https://unpkg.com/mint-ui@1/lib/style.css">
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/polyfill@0.1.0/index.js"></script>
<script src="https://unpkg.com/mint-ui@1/lib/index.js"></script>
<script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>
<script src="https://unpkg.com/vuex@3.1.1/dist/vuex.js"></script>
然后打包，
npm run build
项目就会小很多啦
到这来流程就结束了。
没有了
最后在提一点，如果想把项目用内网穿透到外网，需要在
build > webpack.dev.conf.js
找到devServer，在里面添加：
disableHostCheck: true
还有就是像Toast这样的函数，是不能直接写在created里面的，不然会报错，因为这个时候mint-UI还没有加载，如果必须写到created中，需
将Toast设置为全局变量：
import { Toast } from "mint-ui";
window.Toast = Toast
项目源码：
https://github.com/Encounter123/gitdemo/tree/master/mint-ui/mint-ui
网友评论