vue 建立新项目
vue init webpack test
1.MintUI
npm i mint-ui -S
npm install --save-dev babel-plugin-component
npm install vuex --save
npm install --save-dev eslint-plugin-prettier
2.main.js:
import MintUI from 'mint-ui';
import 'mint-ui/lib/style.css';
Vue.use(MintUI);
3. .babelrc:
"plugins": ["transform-vue-jsx", "transform-runtime",["component",
{
"libraryName": "mint-ui",
"style": true
}
]],
4.sass:
npm install sass-loader@^7.3.1 --save-dev
npm install node-sass@4.14.1 --save-dev
执行完毕后,找到build文件夹,在文件夹里面的webpack.base.conf.js中修改以下配置:
在module下的rules里添加配置:
{
test:/\.scss$/,
loaders:['style','css','sass']
}
最后就到了应用这一步了,只需设置lang="scss"
<style lang="scss" scoped>
</style>
5.高德地图:
第一步:先全局安装vue-amap
npm install vue-amap --save
第二步:全局引入vue-amap在main.js中
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
key: '自己申请的key值',
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
// 默认高德 sdk 版本为 1.4.4
v: '1.4.4'
});
第三步:App.vue中粘贴如下代码(给地图一个盒子):
<template>
<div id="app">
<h3 class="title">{{ msg }}</h3>
<div class="amap-wrapper">
<el-amap class="amap-box" :vid="'amap-vue'"></el-amap>
</div>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'vue-amap欢迎您!'
}
}
}
</script>
<style>
.amap-wrapper {
width: 500px;
height: 500px;
}
</style>
6.生成二维码:
npm install --save qrcode
https://restapi.amap.com/v3/ip?key=7ea8e404682fa2c1a6379151e355c4ab
<pageBox v-show="tables!==0"/>
7.引入element ui
npm i element-ui -S
在 main.js 中写入以下内容:
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);