本项目搭建适用于h5移动端的vue项目搭建，主体是基于vue-cli3脚手架，目的在于搭建个可用于快速启动项目的基础框架。话不多说，马上动手搭建：
1.安装vue cli3
注意Vue CLI 3需要 nodeJs ≥ 8.9 (官方推荐 8.11.0+）
npm install -g @vue/cli
2.新建项目
vue create projectname
选择配置：
首先是选择预设：
第一个是上次本人新建保存的预设，首次预设只有下面两个选项，第一个是默认，第二个是手动配置，我们选择最后一个manually select features
下一步选择手动配置项，图为本人选择的
Check the features needed for your project: (Press to select, to toggle all, to invert selection)
( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用
( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
( ) Router // vue-router（vue路由）
( ) Vuex // vuex（vue的状态管理模式）
( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
( ) Unit Testing // 单元测试（unit tests）
( ) E2E Testing // e2e（end to end） 测试
是否使用history router：y
选择使用的css预处理器
SCSS/SASS //Sass安装需要Ruby环境，是在服务端处理的，SCSS 是 Sass3新语法（完全兼容 CSS3且继承Sass功能）
LESS //Less最终会通过编译处理输出css到浏览器，Less 既可以在客户端上运行，也可在服务端运行 (借助 Node.js)
Stylus //Stylus主要用来给Node项目进行CSS预处理支持，Stylus功能上更为强壮，和js联系更加紧密，可创建健壮的、动态的的CSS。
eslint校验方式
保存时就检测
如何存放配置
选择独立文件存放，不建议放package，后续配置麻烦也容易有坑，一些配置放这里不起作用。
配置完就会开始安装了。
项目基本框架
项目默认没有vue.config.js文件，需要自己创建在项目根目录下
npm run serve启动项目，为了方便，我自己添加了npm run dev的启动方式
package.json添加
3.配置移动端自适应----- flexible和 postcss-px2rem（或者postcss-px2rem-exclude）
1.flexible
ib-flexible会自动在html的head中添加一个meta name="viewport"的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此时1rem应该等于75px。
注意：
1.检查一下html文件的head中，如果有 meta name="viewport"标签，需要将他注释掉，因为如果有这个标签的话，lib-flexible就会默认使用这个标签。而我们要使用lib-flexible自己生成的 meta name="viewport"来达到高清适配的效果。
2.因为html的font-size是根据屏幕宽度除以10计算出来的，所以我们需要设置页面的最大宽度是10rem（750px 一般设计稿都是给750px的）。
npm install lib-flexible --save
在main.js加入import 'lib-flexible'
在App.vue注释或删掉原始nav相关，替换app原来的样式
#app {
width: 100%;
min-height: 100%;
min-width: 320px;
max-width: 750px;
margin: 0 auto;
color: #333;
}
2.postcss-px2rem（或者postcss-px2rem-exclude）
在无第三方UI库使用时，可以使用postcss-px2rem
npm install postcss-px2rem --save
在vue.config.js添加
module.exports = {
css: {
loaderOptions: {
postcss: {
// 这是rem适配的配置 注意： remUnit在这里要根据lib-flexible的规则来配制，如果您的设计稿是750px的，用75就刚刚好。
plugins: [
require("postcss-px2rem")({
remUnit: 75
})
]
}
}
}
使用第三方UI时上面的方法会让第三方ui库样式变小，改用postcss-px2rem-exclude
npm install postcss-px2rem-exclude --save
在项目根目录下的postcss.config.js文件，如果你的项目没有生成这个独立文件，就需要在你的package.js里设置或者创建一个postcss.config.js文件。
floder_name为第三方UI库名称
最好用第一个方法
**postcss.config.js**
module.exports = {
plugins: {
autoprefixer: {},
"postcss-px2rem-exclude": {
remUnit: 75,
exclude: /node_modules|folder_name/i
}
}
};
**package.json
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-px2rem-exclude":{
"remUnit": 75,
"exclude":"/node_modules|floder_name/i"
}
}
}
4.axios
npm install axios --save
在src文件夹下新建utils文件，在此文件下新建apiPath.js和request.js，api用来存放各接口，request编写统一的请求处理。
例如：
apiPath.js
request.js:
import axios from 'axios'
// 创建axios实例
const service = axios.create({
baseURL: '',
timeout: 60 * 1000, // 请求超时时间
})
const errorHandler = (res) => {
let msgStr = '';
if (res.message && res.code) {
msgStr = `${res.message}(${res.code})`;
} else {
msgStr = '抱歉，系统错误';
}
console.log(msgStr)
// 提示错误信息或者处理特殊信息
......
}
// request拦截器
service.interceptors.request.use(
config => {
// 其他处理
const token = getToken();
if (token) {
config.headers['Authorization'] = `${token}`;
}
return config
},
error => {
// Do something with request error
console.error(error) // for debug
Promise.reject(error)
}
)
// response 拦截器
service.interceptors.response.use(
response => {
const res = response.data
try {
if (res.code !== 0) {
errorHandler(res);
return Promise.reject(res)
} else {
return res.data
}
} catch(e) {
console.error(e);
}
},
(error) => {
console.error(error.response); // for debug
return Promise.reject(error.response) // 只写error捕获不了
}
)
export default service
发送请求：
// 引入
import request from '@/utils/request';
import apiPath from '@/utils/apiPath';
// 发起
request({
url: apiPath.API_URL,
method: 'get',
params: {
id: ''
},
}).then(data => {
console.log(data)
}).catch(error => {
console.log(error)
})
request({
url: apiPath.API_URL,
method: 'post',
data: {
id: ''
},
}).then(data => {
console.log(data)
}).catch(error => {
console.log(error)
})
5. vconsole方便移动端debug
npm install vconsole --save
app.vue加入
<script>
import VConsole from 'vconsole';
export default {
mounted() {
let isDebug = this.$route.query.isDebug;
if (isDebug) {
let vConsole = new VConsole();
}
},
}
</script>
路由加上isDebug=true即可
6.其他基础东西的堆砌
新建一些基础样式表，reset为一些标签的初始化，common为共用的样式。
main.js中引入即可
import './assets/css/reset.scss'
import './assets/css/common.scss'
至此，一个基本的vue移动框架搭建完毕，可以着手开发了。
问题反馈：
1.项目部署上线发现路由跳转遇到问题，莫名带上配置cdn的路由，各种跳转都很乱
解决：
const router = new VueRouter({
mode: 'history',
base: '/', // 这里配置一下
// base: process.env.BASE_URL,
routes
})
2.区分线上的测试环境和生产环境
package.json增加
"dev-build": "vue-cli-service build --mode development", // 指定process.env.NODE_ENV为development
参考： https://segmentfault.com/a/1190000015133974
3.vue.config.js配置本地代理
在module.exports里加入
devServer: {
host: "0.0.0.0", //要设置当前访问的ip 否则失效
port: 8080,//当前web服务端口
open: false, //浏览器自动打开页面
proxy: {
'/api': {
target: 'https://',//目标地址
ws: true,//是否代理websocket
changeOrigin: true,//是否跨域
pathRewrite: {
// '^/api': ''//url重写
}
}
}
}
网友评论