准备
安装并生成项目
1、nodejs
2、vue-cli
// 安装
npm install -g vue-cli
// 生成项目
vue init webpack my-project
vue-cli.png
webpack配置
1、自动打开浏览器
config - index.js
autoOpenBrowser: true,
// 本质上为设置的build - webpack.dev.conf.js 中的 open:true
2、错误映射关系
config - index.js
// dev
devtool: 'cheap-module-eval-source-map', // 不用动
// build
devtool: 'cheap-module-source-map', // 可换，线上报错有提示信息
3、打包文件名及URL前缀
项目可能区分不同的端，比如PC，APP，后台管理系统，多个项目放在同一个服务器下，使用同一个域名，只是前缀不同。
config
在config文件夹下新建basePath.js文件
'use strict'
module.exports ='hotel-ecm' // 项目打包名称及URL前缀
config - index.js
const basePath = require('./basePath')
// build
// Template for index.html
index: path.resolve(__dirname, `../${basePath}/index.html`),
// Paths
assetsRoot: path.resolve(__dirname, `../${basePath}`),
// 文件夹名称,本质上为设置的build - webpack.dev.conf.js 中的 output - path
assetsSubDirectory: 'static',
assetsPublicPath: `/${basePath}/`,
// URL前缀,本质上为设置的build - webpack.dev.conf.js 中的 output - publicPath
router - index.js
如果设置了URL前缀，则路由中也需要做配置
const basePath = require('../../config/basePath')
const router = new Router({
base: `/${basePath}/`,
mode: 'history',
routes: []
})
4、loader
less-loader
安装
npm install --save-dev less-loader less
安装完成后就可以使用了，不需要配置
使用
HelloWorld.vue
<style lang="less" scoped>
.father {
.son {
color: #00ff00;
}
}
</style>
或者提取出来
HelloWorld.vue
<style lang="less" scoped>
@import './HelloWorld.less';
.father {
.son {
color: #00ff00;
}
}
</style>
HelloWorld.less
.less-father {
.less-son {
color: #ff0000;
}
}
5、axios
安装
npm install axios --save
配置
在src文件夹下新建api文件夹，在api文件夹新建http.js,api.js
http.js
import axios from 'axios'
axios.defaults.timeout = 50000
axios.defaults.baseURL = '/api/ecm/'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
// 权限 token
axios.defaults.headers.common['Authorization'] = 'token';
// http request 拦截器
axios.interceptors.request.use(
config => {
return config
},
err => {
return Promise.reject(err)
}
)
// http response 拦截器
axios.interceptors.response.use(
response => {
if (response) {
}
return response
},
error => {
if (error.response) {
switch (error.response.status) {
case 401:
console.log('error', error.response.data)
break
}
}
return Promise.reject(error)
}
)
export default axios
api.js
import axios from './http'
const api = {
// 示例
exampleManage: {
getMethod: params => axios.get('/get/get', { params }),
postMethod: formData => axios.post('/post/post', formData),
putMethod: formData => axios.put('/put/put', formData),
deleteMethod: params => axios.get('/delete/delete', { params }),
},
// 权限管理
base: {
logout: params => axios.get('/logout', { params: params }), // 退出
menu: () => axios.get('/index/getUserMenuList'), // 菜单
userInfo: () => axios.get('/user/getCurrentUser'), // 用户信息
},
}
export default api
config - index.js
proxyTable: {
'/api': {
target: 'http://10.96.80.22:8083/',
changeOrigin: true,
pathRewrite: {
'^/api': '/api'
}
}
},
main.js
import qs from 'qs'
Vue.prototype.$qs = qs
6、moment
安装
npm install moment -S
配置
main.js
// 时间处理 示例
// const time = this.$moment(timestamp).format('YYYY-MM-DD HH:mm:ss')
import Moment from 'moment'
Vue.prototype.$moment = Moment
7、babel-polyfill
解决ie兼容性问题
安装
npm install babel-polyfill --save
配置
main.js
在最顶端引入
import 'babel-polyfill';
webpack.base.conf.js
module.exports = {
entry: {
app: ['babel-polyfill', './src/main.js']
},
}
8、ui框架
iview或者element-ui
安装
npm install iview --save
npm i element-ui -S
配置
main.js
import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.use(iView);
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
主题
src/theme -index.less
@import '~iview/src/styles/index.less';
// Here are the variables to cover, such as:
@primary-color: #fc9153;
main.js
import './theme/index.less'
build-utils
less: generateLoaders('less', { javascriptEnabled: true }),
9、样式
src/assets/css/base.css
@charset "UTF-8";
body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6, pre, code,
form, fieldset, legend, input, button,
textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
fieldset, img {
border: 0;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
address, caption, cite, code, dfn,
em, i, strong, th, var, optgroup {
font-style: normal;
font-weight: normal;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
abbr, acronym {
border: 0;
font-variant: normal;
}
input, button, textarea,
select, optgroup, option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
}
code, kbd, samp, tt {
font-size: 100%;
}
/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input, button, textarea, select {
*font-size: 100%;
}
body {
line-height: 1.5;
font-family: "微软雅黑";
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th {
text-align: left;
}
sup, sub {
font-size: 100%;
vertical-align: baseline;
}
/* remember to highlight anchors and inserts somehow! */
:link, :visited, ins {
text-decoration: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
.clearfix:before, .clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
/*浮动*/
.fl {
float: left;
}
.fr {
float: right;
}
/*对齐*/
.tac {
text-align: center;
}
.tar {
text-align: right;
}
src/assets/css/global.less
@baseColor: #fc9153;
html,
body {
background: #f4f5f7;
min-width: 1200px;
min-height: 100%;
overflow-x: hidden;
}
main.js
import './assets/css/base.css'
import './assets/css/global.less'
10、全局变量
配置完之后，别的文件就可以使用src/assets/css/global.less中@baseColor这样的全局变量
安装
npm i sass-resources-loader --save-dev
配置
build-utils
function lessResourceLoader() {//配置less
var loaders = [
cssLoader,
'less-loader',
{
loader: 'sass-resources-loader',
options: {
resources: [
path.resolve(__dirname, '../src/assets/css/global.less'),
]
}
}
];
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// 同文件，应用上述的方法
// less: generateLoaders('less'),
less: lessResourceLoader(),
注意点
src/assets/css/global.less
less文件中不可以引用当前目录的css
网友评论