vue+webpack+mint-ui 示例（如何使用mint-ui組件）

時間 2019-11-12

標籤 vue+webpack+mint vue webpack mint 示例如何使用組件简体版

原文原文鏈接

學習中。。。。。待完善javascript

參考地址：http://blog.csdn.net/keliyxyz/article/details/51571386css

　　　　　https://zhuanlan.zhihu.com/p/21802181　html

　　　　　mint-ui文檔 http://mint-ui.github.io/#!/zh-cn vue

　　一、新建項目，項目目錄結構爲java

|- src/  --------------------- 項目源代碼
    |- App.vue
    |- main.js  -------------- 入口文件
|- .babelrc  ----------------- babel 配置文件
|- index.html  --------------- HTML 模板
|- package.json  ------------- npm 配置文件
|- README.md  ---------------- 項目幫助文檔
|- webpack.config.json  ------ webpack 配置文件

　　二、安裝node

　　node.js，包管理工具 npm會一塊兒裝上。webpack

　　webapck，webpack 能夠用用npm 命令來裝git

$ npm install webpack -g

　　三、項目中使用webpackgithub

　　你的項目最好也有webpack 依賴。這樣你能夠在項目中自由決定用webpack哪一個版本而必去用全局那個webpack。 web

　　用 npm 命令添加一個 package.json文件。

$ npm init

　　四、若是你不發佈npm包，Init過程當中的問題不重要，均可以忽略。安裝webpack 並添加到package.json中：

$ npm install webpack --save-dev

　　五、安裝依賴

$ 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

　　六、項目根目錄新建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]'
				}
			}
		]
	}
}

　　七、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"
  }
}

　　八、在項目根目錄新建.babelrc.js文件，做用

{ "presets": ["es2015"] }

　　九、在項目目錄下新建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>

　　十、在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)
})

　　十一、在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>

　　十二、運行npm run dev來生成開發模式下的bundles以及啓動本地server