一：安裝
1.vue create 工程名（注vue3： build沒了、config沒了，3.0的安裝項目時自動下載node-model。）
2.在根目錄下創建一個vue.config.js
function getIPAdress(){
var interfaces = require('os').networkInterfaces();
for(var devName in interfaces){
var iface = interfaces[devName];
for(var i=0;i<iface.length;i++){
var alias = iface[i];
if(alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal){
return alias.address;
}
}
}
}
module.exports = {
// baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/',
publicPath:'./',//vue-cli3.3+新版本使用
// eslint-loader 是否在保存的時候檢查
lintOnSave: true,
//放置生成的靜態資源 (js、css、img、fonts) 的 (相對於 outputDir 的) 目錄。
assetsDir: 'static',
// outputDir: 在npm run build時 生成文件的目錄 type:string, default:'dist'
// outputDir: 'dist',
// pages:{ type:Object,Default:undfind }
//生產環境是否生成 sourceMap 文件，一般情況不建議打開
productionSourceMap: false,
css:{
// 是否使用css分離插件
extract: true,
// 開啟 CSS source maps，一般不建議開啟
sourceMap: false,
},
devServer: {
port: 1818, // 端口號
host: getIPAdress(),
https: false, // https:{type:Boolean}
open: true, //配置自動啟動瀏覽器
compress: true,//配置熱更新
proxy: {
'/api': {
target: 'http://image.hn8718.com:8777', //API服務器的地址
ws: true, //代理websockets
changeOrigin: true, // 虛擬的站點需要更管origin
pathRewrite: { //重寫路徑 比如'/api/aaa/ccc'重寫為'/aaa/ccc'
'^/api': ''
}
}
},//跨域
},
}
或者：
module.exports = {
baseUrl: process.env.NODE_ENV ===
'production'
?
'/online/'
:
'/'
,
// outputDir: 在npm run build時 生成文件的目錄 type:string, default:'dist'
// outputDir: 'dist',
// pages:{ type:Object,Default:undfind }
devServer: {
port: 8888,
// 端口號
host:
'localhost'
,
https:
false
,
// https:{type:Boolean}
open:
true
,
//配置自動啟動瀏覽器
// proxy: 'http://localhost:4000' // 配置跨域處理,只有一個代理
proxy: {
'/api'
: {
target:
'<url>'
,
ws:
true
,
changeOrigin:
true
},
'/foo'
: {
target:
'<other_url>'
}
},
// 配置多個代理
}
}
二、配置vue-router
cnpm
install vue-router --save
1.在src增加router文件加入js
2.進行路由配置（圖+代碼）
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const Routes = [
{ path: '*', redirect: '/welcome' },
{
path: '/welcome',
name: '歡迎頁面',
component:() => import('@/views/demo/pages/welcome')
},
{
path: '/page1',
name: 'page1',
component: () => import('@/views/demo/pages/page1')
},
]
const createRouter = () => new Router({
routes: Routes
})
const router = createRouter()
export default router；
3.在main.js中引入
4.修改app.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* text-align: center;
color: #2c3e50;
margin-top: 60px; */
}
</style>
三、px轉rem
1.cnpm install
postcss-px2rem
2.在public中添加rem.js
// 基准大小 const baseSize = 32 // 設置 rem 函數 function setRem() { // 當前頁面寬度相對於 750 寬的縮放比例，可根據自己需要修改。 const scale = document.documentElement.clientWidth / 750 // 設置頁面根節點字體大小 document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px' } // 初始化 setRem() // 改變窗口大小時重新設置 rem window.onresize = function() { setRem() }
3.在vue.config.js中添加（圖加代碼）
const px2rem = require('postcss-px2rem') const postcss = px2rem({ remUnit: 32 //基准大小 baseSize，需要和rem.js中相同 }) module.exports = { css: { loaderOptions: { postcss: { plugins: [ postcss ] } } } }4.在main.js中添加
;(function(){
var rem = document.createElement('script');
rem.src = './rem.js';
document.body.appendChild(rem)
})()
四、熱更新
五、配置less
1.cnpm install less less-loader --save-dev
六、配置axios
1.cnpm install axios --save
2.為了解決跨域問題，我配置了withCredential。
import axios from 'axios'
import {Message} from 'element-ui'
axios.defaults.withCredentials=true; //請求攜帶cookie
var baseURL='http://192.168.0.169:8080/api';//王帥
const instance = axios.create({
baseURL
})
instance.interceptors.response.use(response => {
if(response.data.code==401){
// toLogin();
return;
}
return response;
})
export let myAxiosGet = (url, params)=>{
return new Promise((resolve, reject) => {
instance.get(url, {params,withCredentials:true}).then(function (response) {
resolve(response.data)
if(!response.data.success){
Message({
message: response.data.message,
type: 'error'
});
}
})
.catch(function (err) {
Message({
message: '獲取信息失敗',
type: 'error'
});
reject(err);
})
})
}
export let myAxios = (method,url, params)=>{
return new Promise((resolve, reject) => {
instance({
method: method,
url,
data: params,
},{
withCredentials:true
})
.then(function (response) {
resolve(response.data);
if(!response.data.success){
Message({
message: response.data.message,
type: 'error'
});
}
})
.catch(function (err) {
Message({
message: '獲取信息失敗',
type: 'error'
});
reject(err);
});
})
}