1.安装基础包
npm install -g @vue/cli
查看版本
vue --version 或者 vue -V (大写v)
命令来创建一个新项目
vue create hello-world
不要用gitBash选择，最好用VScode来打开
不断回车就好了
2.安装less
npm install less less-loader@6.0.0 --save-dev
不能安装太高版本的less-loader
3.新建文件夹
4.设置别名
新建 vue.config.js 文件
/*
* @Description: vue配置文件
* @FilePath: \MarketAction\marketing\vue.config.js
*/
module.exports = {
configureWebpack: {
// 设置别名
resolve: {
alias: {
"@api": "@/request/api",
"@assets": "@/assets",
"@components": "@/components",
"@views": "@/views",
},
},
},
};
5.配置基本axios
1.安装：
npm install axios --save-dev
2.新建文件 http.js ,api.js
3.http.js配置
/*
* @Description: 请求配置文件
*/
import axios from "axios";
// 环境的切换
switch (process.env.NODE_ENV) {
// 开发
case "development":
axios.defaults.baseURL = "https://api";
break;
// 生产
case "production":
axios.defaults.baseURL = "https://";
break;
default:
break;
}
// 请求超时时间
axios.defaults.timeout = 10000;
/**
* @description: get方法，对应get请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function get(url, params) {
return new Promise((resolve, reject) => {
axios
.get(url, {
params: params,
})
.then((res) => {
resolve(res.data);
})
.catch((err) => {
reject(err.data);
});
});
}
/**
* @description: post方法，对应post请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function post(url, params) {
return new Promise((resolve, reject) => {
axios
.post(url, params)
.then((res) => {
resolve(res.data);
})
.catch((err) => {
reject(err.data);
});
});
}
//可参考这个文章 https://juejin.cn/post/6844903652881072141#heading-9
- api.js
/*
* @Description: 请求接口文件
*/
import { get,post } from "./http";
const submitOrdersUrl = "pay/webpageal";
const messageCodeUrl = "basebusiness/read/";
export const submitOrders = (p) => post(submitOrdersUrl, p);
export const messageCode = (p) => get(messageCodeUrl, p);
5.页面引用：
import { submitOrders, messageCode } from "@api";
方法内调用：
messageCode({ type: 1 }).then((res) => {})
6.初始化css
在App.vue中设置import "normalize.css"
npm下载 normalize.css
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
import "normalize.css"
export default {
name: "App",
};
</script>
<style>
#app {
margin: 0;
padding: 0;
box-sizing: content-box;
}
</style>
7.优化单页面的SEO
在main.js引入 vue-meta
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import Meta from "vue-meta"; //设置单页html的头部信息
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Meta);
Vue.use(Vant);
Vue.config.productionTip = false;
new Vue({
router,
render: (h) => h(App),
}).$mount("#app");
使用：
<script>
export default {
metaInfo: {
title: "活动套餐",
meta: [
{ name: "discription", content: "活动套餐" },
{ name: "keywords", content: "美图，推广" },
],
},
};
</script>
8 优化H5页面兼容浏览器
可以使用max-width
max-width: 750px;
margin: 0 auto;
9 添加二维码显示
或者安装 qrcode 库
npm install vue-qr --save
10. 项目路径提示别名设置；
-
1. 安装Path Intellisense插件
在setting中配置
"path-intellisense.mappings": {
"@": "${workspaceRoot}/src",
"@api": "${workspaceRoot}/src/request/api",
"@components": "${workspaceRoot}/src/components",
"@views": "${workspaceRoot}/src/views",
"@common": "${workspaceRoot}/src/common",
},
-
2. 在项目根路径新建 jsconfig.json 文件
{
"compilerOptions": {
"target": "ES6",
"allowSyntheticDefaultImports": true,
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
"exclude": [
"node_modules"
]
}
-
3. 安装koroFileHeader插件
使用快捷键生成 方法名
-
4. 使用，可以在接口使用
11. 在 Vue 项目中引入 Lodash
-
1.安装
npm i lodash --save
-
2.优化按需加载
npm i --save-dev lodash-webpack-plugin babel-core babel-loader babel-plugin-lodash babel-preset-env
-
3. 在vue.config文件中配置
const LodashModuleReplacementPlugin = require("lodash-webpack-plugin");
const production = process.env.NODE_ENV === "production";
module.exports = {
chainWebpack: (config) => {
if (production) {
config.plugin("loadshReplace").use(new LodashModuleReplacementPlugin());
//生产环境才开启 不然开发时lodash函数不起作用 也不报错
}
},
}
注意不要重新安装webpack，vue-cli3是使用webpack4的
-
4. 使用
新建utilit文件夹，专门放工具函数的index.js
import _ from "lodash";
// 防抖
const pressDebounce = _.debounce(
(func) => {
func();
},
3000,
{ leading: true, trailing: false, maxWait: 3000 }
);
// 节流
const pressThrottle = _.throttle(
(func) => {
func();
},
1000,
{ leading: true, trailing: false, maxWait: 1000 }
);
export { pressDebounce, pressThrottle };
组件中引用：
import {pressThrottle} from "@/utilit/index.js";
定义：
bugNowDebounce() {
pressThrottle(this.bugNow);
},
使用：<div class="footer_bug" @click="bugNowDebounce">
12. vue-cli本地配置不同的域名进行验证
背景：微信支付需要配置和商家一致的域名才能进行支付
- 打开文件C:\WINDOWS\system32\drivers\etc\hosts 修改配置文件
例子.本地ip + 要转发到的域名
- 打开cdm 命令行ping一下
3.在vue.config.js 设置
// 新版的webpack-dev-server增加了安全验证，默认检查hostname，如果hostname不是配置内的，将中断访问。
devServer: {
disableHostCheck: true,
},
3.效果：设置的域名可以访问本地项目
13. vue-cli打包出现# TyeError: Class extends value undefined is not a constructor or null
使用 npm add webpack@4.5.0 更新webpack版本就可以了
14 vue-打包配置服务器上的文件路径
1.路由需要重定向-不要设置history模式
2.vue.config.js需要配置
publicPath: '/salepage/',
15 vuex模块化使用
npm install vuex --save
- 在src下新建文件夹store，index.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
import officialPackage from "./modules/officialPackage";
export default new Vuex.Store({
modules: {
officialPackage,
},
});
文件结构
- main.js引入
import Vue from "vue";
import store from "./store";
new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");
3.新建模块 store\modules\officialPackage.js
const state = {
tabPage: 0, //切换栏
};
const mutations = {
setTabPage(state, payload) {
state.tabPage = payload;
},
};
//导出
export default {
state,
mutations,
};
3.在组件中使用
computed: {
tabPage() {
return this.$store.state.officialPackage.tabPage;
},
},
设置
this.$store.commit("setTabPage", index);
