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=false

Vue.use(ElementUI)

new Vue({
el:'#app',
router,
template:'<App/>',
components:{App}
})

引入echart.js

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

import echarts from 'echarts'

引入axios用于处理http请求

如果用ajax，需单独引入jquery