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项目模板的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
