1.vue create (項目名)

2.新建vue.config.js
配置鏈接：https://cli.vuejs.org/zh/config/
模板

const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV) module.exports = {// publicPath:'../dist/',publicPath: IS_PROD ? process.env.VUE_APP_PUBLIC_PATH : "./", // 默認'/'，部署應用包時的基本 URLdevServer: {port: "4000",open: true,// development server port 8000overlay: {warnings: false,errors: false},// If you want to turn on the proxy, please remove the mockjs /src/main.jsL11proxy: {'/': {target: process.env.VUE_APP_API_BASE_URL,ws: false,changeOrigin: true,pathRewrite: {}},'/api': {target: process.env.VUE_APP_API_BASE_URL,ws: false,changeOrigin: true,pathRewrite: {'^/api': '/api'}}}},chainWebpack: config => {config.plugin('html').tap(args => {args[0].title = ''return args})} }

3.新建.env / .env.development 文件

NODE_ENV=productionVUE_APP_API_BASE_URL=http://www.baidu.comVUE_APP_PUBLIC_PATH=../dist/ NODE_ENV=developmentVUE_APP_API_BASE_URL=http://www.baidu.com

4.npm install axios --save
新建utils文件夾，在該文件夾下新建request.js

import axios from 'axios' // 創建 axios 示例 const request = axios.create({baseURL: process.env.VUE_APP_API_BASE_URL, // API 請求的默認前綴timeout: 10000, // 請求超時時間 })// 請求攔截器 request.interceptors.request.use(config => {// 在發送請求前做些什么// const TOKEN = localStorage.getItem('TOKEN')// if (TOKEN) {// config.headers['token'] = TOKEN// }return config }, error => {return Promise.reject(error) })// 響應攔截器 request.interceptors.response.use(response => {// 處理響應數據if (response.data.code === 2000) {return response.data}return response }, error => {return Promise.reject(error) })export default request

和http.js

import request from './request' export const get = (url, params={}) => {return request({url,params,method: 'get'}) }export const post = (url, data={}, headers = {'Content-Type': 'application/json;charset=UTF-8' }) => {return request({url,data,method: 'post',headers}) }

在main.js中引入

import { get, post } from '@/utils/http' Vue.prototype.$get = get Vue.prototype.$post = post//使用 this,$get().then(res => {})

5.npm install amfe-flexible --save
在main.js中引入

import 'amfe-flexible'

6.npm install postcss-pxtorem --save-dev
創建postcss.config.js文件

module.exports = {plugins: {"postcss-pxtorem": {// 設計稿 375:37.5// 設計稿：750:75// Vant 是基于 375rootValue: 75, // 設計稿以寬度750px為例selectorBlackList: [".van-"], //排除，van-開頭的class，不進行rem轉換propList: ["*"]}}}

7.新建.browserslistrc

> 1%last 2 versionsnot dead

8.npm install weixin-js-sdk --save
在main.js中

import wx from 'weixin-js-sdk'Vue.prototype.$wx = wx

9.npm install vant --save
得先安裝 npm i babel-plugin-import -D
然后再babel.config.js中

module.exports = {plugins: [['import', {libraryName: 'vant',libraryDirectory: 'es',style: true}, 'vant']],presets: ["@vue/cli-plugin-babel/preset"]};

在main.js中按需引入

import { Picker, Popup } from 'vant'Vue.use(Picker)Vue.use(Popup)

10.npm install lodash --save
在main.js中

import _ from 'lodash'Vue.prototype._ = _

使用

this._.debounce(this.handleClick,1000,false)

總結

以上是生活随笔為你收集整理的vueH5项目模板的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。