vue+webpack+mintui示例（如何使用mintui组件）

webpack文章/教程1年前 (2022)发布勤奋小助

0 0

学习中。。。。。待完善

参考地址：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