学习中。。。。。待完善
参考地址：http://blog.csdn.net/keliyxyz/article/details/51571386
https://zhuanlan.zhihu.com/p/21802181
mint-ui文档 http://mint-ui.github.io/#!/zh-cn
1、新建项目，项目目录结构为
|- src/ --------------------- 项目源代码
|- App.vue
|- main.js -------------- 入口文件
|- .babelrc ----------------- babel 配置文件
|- index.html --------------- HTML 模板
|- package.json ------------- npm 配置文件
|- README.md ---------------- 项目帮助文档
|- webpack.config.json ------ webpack 配置文件
2、安装
node.js，包管理工具 npm会一起装上。
webapck，webpack 可以用用npm 命令来装
$ npm install webpack -g
3、项目中使用webpack
你的项目最好也有webpack 依赖。 这样你可以在项目中自由决定用webpack哪个版本而必去用全局那个webpack。
用 npm 命令添加一个 package.json文件。
$ npm init
4、如果你不发布npm包，Init过程中的问题不重要，都可以忽略。 安装webpack 并添加到package.json中：
$ npm install webpack --save-dev
5、安装依赖
$ npm install webpack webpack-dev-server style-loader css-loader file-loader --save-dev $ npm install babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-runtime --save-dev $ npm install vue vue-loader vue-template-compiler --save-dev $ npm install mint-ui --save-dev
6、项目根目录新建webpack.config.js文件
var path = require(\'path\');
var webpack = require(\'webpack\');
module.exports = {
entry: \'./src/main.js\',
output: {
path: path.resolve(__dirname, \'./dist\'),
publicPath: \'/dist/\',
filename: \'build.js\'
},
resolveLoader: {
moduleExtensions: [\'-loader\']
},
module: {
loaders: [{
test: /\.vue$/,
loader: \'vue\'
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: \'babel\'
},
{
test: /\.css$/,
loader: \'style!css\'
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: \'file\'
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: \'file\',
query: {
name: \'[name].[ext]?[hash]\'
}
}
]
}
}
7、package.json文件
{
"name": "shopvue",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.24.0",
"babel-loader": "^6.4.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.0",
"babel-runtime": "^6.23.0",
"css-loader": "^0.28.0",
"file-loader": "^0.11.1",
"mint-ui": "^2.2.3",
"style-loader": "^0.16.1",
"vue": "^2.2.6",
"vue-loader": "^11.3.4",
"vue-template-compiler": "^2.2.6",
"webpack": "^2.3.3",
"webpack-dev-server": "^2.4.2"
},
"dependencies": {
"mint-ui": "^2.2.3"
}
}
8、在项目根目录新建.babelrc.js文件，作用
{ "presets": ["es2015"] }
9、在项目目录下新建index.html文件
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>首页</title> </head> <body> <div id="app"></div> <script src="dist/build.js"></script> </body> </html>
10、在src新建main.js文件
import Vue from \'vue\';
import MintUI from \'mint-ui\';
import \'mint-ui/lib/style.css\';
import App from \'./App.vue\';
Vue.use(MintUI);
new Vue({
el: \'#app\',
render: h => h(App)
})
11、在src目录新建App.vue文件
<template>
<div class="page-actionsheet">
<h1 class="page-title">mint-ui-example</h1>
<mt-button type="primary" @click.native="sheetVisible = true">
选择操作
</mt-button>
<mt-actionsheet :actions="actions" v-model="sheetVisible"></mt-actionsheet>
</div>
</template>
<style>
@component-namespace page {
@component actionsheet {
@descendent wrapper {
padding: 0 20px;
position: absolute 50% * * *;
width: 100%;
transform: translateY(-50%);
button:first-child {
margin-bottom: 20px;
}
}
}
}
</style>
<script type="text/babel">
import { Toast, MessageBox } from \'mint-ui\';
export default {
data() {
return {
sheetVisible: false,
actions: [
{ name: \'展示 Toast\', method: this.showToast },
{ name: \'展示 Message Box\', method: this.showMsgbox }
]
};
},
methods: {
showToast() {
Toast(\'这是一个 Toast\');
},
showMsgbox() {
MessageBox(\'提示\', \'这是一个 Message Box\');
}
}
};
</script>
12、运行npm run dev来生成开发模式下的bundles以及启动本地server
$ npm run dev