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/DMS/',
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

猜你喜欢

转载自www.cnblogs.com/floud/p/12105612.html