VUE

npm install cnpm -g
cnpm install --global vue-cli

# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置，默认回车即可
This will install Vue 2.x version of the template.

$ cd my-project
$ cnpm install
// 运行VUE
$ cnpm run dev

# 查看版本
npm -v

# 全局安装
npm install -g webpack

# 全局删除
npm uninstall -g webpack

# 查看npm安装module版本
npm list

# 查看单个npm库的version
npm view <package> version

# 生成dist文件
npm run build

# vue-router
# router/index.js
export default new Router({
  //mode: 'history',
  mode: 'hash',  //改为hash
  base: '/dist/', //加上这一行

# config/index.js
//assetsPublicPath: '/',
// 修改
assetsPublicPath: '/dist/',

# ./build/webpack.dev.conf.js
devServer: {
    host: '0.0.0.0',//your ip address
    port: 8080,
    disableHostCheck: true,
    ...
}

main.js 模块加载
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import * as echarts from 'echarts'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import axios from 'axios'

Vue.prototype.$http = axios
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false


// Import Bootstrap and BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
    // Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
})

Test.vue
<template>
  <div id="predict">
    test
    <div id="myChart" :style="{width: '600px', height: '400px'}"></div>
    <!-- <div id="myChart" :style="{}"></div> -->
    <!-- <v-chart id="myChart" class="chart" :option="option" /> -->
  </div>

</template>

<script>

export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to kalacloud.com'
    }
  },
  mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
        // 基于刚刚准备好的 DOM 容器，初始化 EChart 实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
            title: { text: '太阳系八大行星的卫星数量' },
            tooltip: {},
            xAxis: {
                data: ["水星","金星","地球","火星","木星","土星","金王星","海王星"]
            },
            yAxis: {},
            series: [{
                name: '数量',
                type: 'bar',
                data: [0, 0, 1, 2, 79, 82, 27, 14]
            }]
        });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

#myChart{
  position: absolute;
  left: 50%;
  /* top: 50%; */
  /* transform: translate(-50%, -50%); */
  transform: translate(-50%, 0);
  padding: 10px;
}
</style>

async function status() {
  const url = "https://api.com";
  let response = await axios.get(url);
  return response.data;
}

status().then((data) => console.log(data));

new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get('https://www.runoob.com/try/ajax/json_demo.json')
      .then(response => (this.info = response))
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });
  }
})