使用淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
初始化项目
vue init webpack 项目名称
安装依赖
cnpm install
启动项目
npm run dev
vue和UI框架使用cdn
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>vue-cli配置示例</title>
<!-- vant-ui.css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.0/lib/index.css">
<!-- font-awesome.css -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" >
<!-- vue.js -->
<script src="https://cdn.bootcss.com/vue/2.5.21/vue.min.js"></script>
<!--vant-ui.js-->
<script src="https://cdn.jsdelivr.net/npm/vant@2.0/lib/vant.min.js"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
// build/webpack.base.conf.js
```
module.exports = {
externals: {
vue: "Vue",
"element-ui": "ELEMENT",
"vant-ui": "vant"
}
}
```
// src/main.js
import App from "./App";
import router from "./router";
// Vue.use(ELEMENT);
Vue.use(vant);
Vue.config.productionTip = false;
new Vue({
el: "#app",
router,
components: { App },
template: "<App/>"
});
使用less
cnpm install less less-loader -S
// build/webpack.base.confi.js
module.exports = {
module: {
rules: [
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
}
]
}
}
// *.vue
// scoped表示样式只在当前组件中生效
<style lang="less" scoped>
</style>
使用axios、vue-cookies
cnpm install axios -S
cnpm install vue-cookies -S
// src/utils/index.js
import axios from "axios";
import VueCookies from "vue-cookies";
import router from "@/router";
axios.defaults.timeout = 5000;
axios.defaults.baseURL = process.env.API_ROOT;
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
axios.interceptors.request.use(function(config) {
let userInfo = VueCookies.get("userInfo");
let token = userInfo ? userInfo["token"] : "";
config.headers.common["token"] = token;
return config;
});
axios.interceptors.response.use(
(res => {
if (res.data.errno === "4101") {
VueCookies.remove("userInfo");
router.push("/");
}
if (res.data.errno !== "0") {
// 提示信息可修改
vant.Dialog.alert({
title: "错误信息",
message: res.data.msg
}).then(() => {
router.push("/");
});
}
return res.data;
}).bind(this)
);
export { router, VueCookies, axios };
// src/main.js
import App from "./App";
import { router, VueCookies, axios } from "./utils";
Vue.use(VueCookies);
Vue.prototype.$http = axios;
// Vue.use(ELEMENT);
Vue.use(vant);
Vue.config.productionTip = false;
new Vue({
el: "#app",
router,
components: { App },
template: "<App/>"
});
// config/index.js
module.exports = {
dev: {
assetsSubDirectory: "static",
assetsPublicPath: "/",
proxyTable: {
"/api": {
target: "https://api.pxcoder.club",
changeOrigin: true,
secure: false, // 代理到https
pathRewrite: {
"^/api": ""
}
}
},
}
// config/dev.env.js
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_ROOT: '"/api"'
});
// config/prod.env.js
module.exports = {
NODE_ENV: '"production"',
API_ROOT: '"https://api.pxcoder.club"'
};
使用amfe-flexible
cnpm install amfe-flexible -S
// main.js
import "amfe-flexible";
使用postcss-pxtorem
cnpm install postcss-pxtorem -D
// postcss.config.js
const autoprefixer = require('autoprefixer')
const pxtorem = require('postcss-pxtorem')
module.exports = ({ file }) => {
let rootValue
// vant 37.5 [link](https://github.com/youzan/vant/issues/1181)
if (file && file.dirname && file.dirname.indexOf('vant') > -1) {
rootValue = 37.5
} else {
rootValue = 75
}
return {
plugins: [
autoprefixer(),
pxtorem({
rootValue: rootValue,
propList: ['*'],
minPixelValue: 2
})
]
}
}
解决打包后静态文件路径错误
// config/index.js
module.exports = {
build: {
assetsPublicPath: './',
}
}
webpack打包不生成map文件
// config/index.js
module.exports = {
build: {
productionSourceMap: false,
}
}
vue-cookies的使用
// vue-cookies 支持直接设置对象和读取对象
// 有效期：
// 可以直接设置数字，单位为分钟，支持加减乘除和日期对象
// y -> year
// m -> month
// d -> day
// h -> hour
// min -> minute
// s -> second
// 设置cookie
this.$cookies.set("token", "123456", "7d");
// 获取cookie
this.$cookies.get("token");
// 删除cookie
this.$cookies.remove("token");
// 不支持清空cookie
二次封装axios的使用
// 默认从cookie中获取token,并在请求头中携带token发送后端
// 未登陆、登陆失效和数据异常均已经处理，只需要处理数据正常的情况
// 完整
this.$http({
method: "get",
url: "/test/v1.0/teacher/students"
}).then(
(res => {
console.log(res);
}).bind(this)
);
// get 查
this.$http.get("/test/v1.0/teacher/students").then((res=>{
}).bind(this));
// post 增
this.$http.post("/test/v1.0/teacher/students", {
name: "",
age: ""
}).then((res=>{
}).bind(this));
// put 改
this.$http.post("/test/v1.0/teacher/students", {
name: "",
age: ""
}).then((res=>{
}).bind(this));
// delete 删
this.$http.delete("/test/v1.0/teacher/students").then((res=>{
}).bind(this));
