1、环境准备:node.js
vue-cli: $ npm install vue-cli -g
2、建立项目目录:vuedemo,并cd到该目录下
3、$ vue init webpack
vue-router yes
4、webstorm打开该项目
5、$ npm install axios -S
新建目录src/api,并复制api.js文件到该目录
config/index.js--01
config/index.js--02
6、$ npm install vuex -S
复制src/vuex文件夹
main.js import store from '@/vuex/store'; store
7、$ npm install element-ui -S
main.js----
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
8、$ npm install d3 --save
9、vue-router+布局
5~8安装完成之后,复制src目录
10、iconfont
dev:index.html <link rel="stylesheet" href="http://at.alicdn.com/t/font_6666666_88888888888.css">
build:main.js import './assets/iconfont/iconfont.css';
====build/utils.js
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
-----------------------
publicPath: '../../',
-----------------------
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
====config/index.js
--01--dev-----
proxyTable: {
'/api': {
target: 'http://localhost:8080/springmvc/',
changeOrigin: true, // 必须,为true的话,请求的header将会设置为匹配目标服务器的规则(Access-Control-Allow-Origin)
pathRewrite: {"^/api" : ""} //后面可以使重写的新路径,一般不做更改
}
}
--02--dev----------
port: 8888, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
--03--build----------
assetsPublicPath: './',
staticPath: './static/',
productionSourceMap: false,
====index.html
添加网站icon,设置全局样式
----------------
<link rel="shortcut icon" href="./static/xxx.ico" type="image/x-icon" />
<title>数据管理系统</title>
<style>
html,body,#app {
height: 100%;
padding: 0px;
margin: 0px;
}
</style>
====.babelrc
compact:false(不压缩)
====
src/assets/img
<img src="@/assets/img/user.png" class="el-dropdown-link"/>
static/temp
src: './static/temp/xxx/015.jpg',
------------------------
npm i prettier@~1.12.1