準(zhǔn)備
安裝并生成項(xiàng)目
1、nodejs
2蒸痹、vue-cli
// 安裝
npm install -g vue-cli
// 生成項(xiàng)目
vue init webpack my-project
vue-cli.png
webpack配置
1、自動(dòng)打開(kāi)瀏覽器
config - index.js
autoOpenBrowser: true,
// 本質(zhì)上為設(shè)置的build - webpack.dev.conf.js 中的 open:true
2、錯(cuò)誤映射關(guān)系
config - index.js
// dev
devtool: 'cheap-module-eval-source-map', // 不用動(dòng)
// build
devtool: 'cheap-module-source-map', // 可換蛔糯，線上報(bào)錯(cuò)有提示信息
3、打包文件名及URL前綴
項(xiàng)目可能區(qū)分不同的端窖式，比如PC蚁飒，APP，后臺(tái)管理系統(tǒng)萝喘，多個(gè)項(xiàng)目放在同一個(gè)服務(wù)器下淮逻，使用同一個(gè)域名琼懊，只是前綴不同。
config
在config文件夾下新建basePath.js文件
'use strict'
module.exports ='hotel-ecm' // 項(xiàng)目打包名稱及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}`),
// 文件夾名稱,本質(zhì)上為設(shè)置的build - webpack.dev.conf.js 中的 output - path
assetsSubDirectory: 'static',
assetsPublicPath: `/${basePath}/`,
// URL前綴,本質(zhì)上為設(shè)置的build - webpack.dev.conf.js 中的 output - publicPath
router - index.js
如果設(shè)置了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>
或者提取出來(lái)
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'
// 權(quán)限 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 }),
},
// 權(quán)限管理
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
// 時(shí)間處理 示例
// const time = this.$moment(timestamp).format('YYYY-MM-DD HH:mm:ss')
import Moment from 'moment'
Vue.prototype.$moment = Moment
7脑漫、babel-polyfill
解決ie兼容性問(wèn)題
安裝
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;
}
/*浮動(dòng)*/
.fl {
float: left;
}
.fr {
float: right;
}
/*對(duì)齊*/
.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)
}
}
// 同文件，應(yīng)用上述的方法
// less: generateLoaders('less'),
less: lessResourceLoader(),
注意點(diǎn)
src/assets/css/global.less
less文件中不可以引用當(dāng)前目錄的css
