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);