vue搭建手顺

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

巴特西

vue搭建手顺

最新文章

热门文章