Webpack、Vue、Element UI基础工程构建

npm安装webpack,用于将工程的js、css、png等文件打包

安装vue-cli脚手架,如果没装成功,可能npm版本太低

跑完用vue -V查看Vue是否成功全局引入，注意这里的用大写的V

有了这两个就可以构建基本工程，这里将工程命名为lindl-blog-web

将下载好的工程导入idea,如果本地启动的服务太多，避免冲突，可以修改config下的index.js修改服务启动的端口

用npm run dev启动服务

服务启动完会自动打开vue官方示例首页说明工程构建完成

引入Element UI

或在package.json的dependencies配置

src/components/hello.vue

<template>  <div class="hello">    <h1>{{ msg }}</h1>    <el-button>默认按钮</el-button>    <el-button type="primary">主要按钮</el-button>    <el-button type="text">文字按钮</el-button>  </div></template><script>  export default {    name: 'hello',    data () {      return {        msg: 'Welcome to LinDL Blog'      }    }  }</script><style scoped>  h1, h2 {    font-weight: normal;  }  ul {    list-style-type: none;    padding: 0;  }  li {    display: inline-block;    margin: 0 10px;  }  a {    color: #42b983;  }</style>

main.js

import Vue from 'vue'import ElementUI from 'element-ui'import 'element-ui/lib/theme-default/index.css'Vue.config.productionTip=falseVue.use(ElementUI)new Vue({  el:'#app',  router,  template:'<App/>',  components:{App}})

引入echart.js
主要用于绘制统计图,哪个页面用到就在哪个页面引

import echarts from 'echarts'

引入axios用于处理http请求
如果用ajax，需单独引入jquery