在写这篇文章之前我刚刚自己完成了一个H5落地页的project,没做过的我只能搜索百度看前辈们的做法,接下来我就会把我做的步骤给大家列下来(也是参考了其他前辈们的写法)文末我会把前辈们的连接留下 我只是做也一些搬运然后加上自己的一些东西 嘿嘿嘿!欧力给
首先搭建环境
环境搭建
01. 安装Node.js Node.js安装包及源码
下载地址为:https://nodejs.org/en/download/、64 位安装包下载地址 :
https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi
02. 检测一下node版本,在cmd命令框框内输入命令 node --version 查看node是否安装成功
03. 查看npm版本 输入命令 npm -v、
npm版本需要大于3.0、如果当前版本比较低可以升级它 cnpm install npm -g
'提示' 在这里没有安装淘宝cnpm镜像的可以安装一下
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm 和 npm有什么区别:因为npm安装插件是从国外服务器下载,受网络影响大,
可能出现异常,如果npm的服务器在中国就好了,所以淘宝团队干了这事
npm 可以安装node插件 cnpm使用的是淘宝网的镜像
04. 安装vue cnpm install vue
05. Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页面应用
06 cnpm install --global vue-cli // 安装vue-cli脚手架
项目创建
01. vue init webpack my-project // 创建一个基于webpack的项目
02. // 这里需要进行一些配置,默认回车即可
03. cd my-project // 进入项目
04. cnpm install // 安装相关项目依赖
05. cnpm run dev // 运行项目 http://locahost:8080 打开项目
VScode 中去除提示及警告:https://blog.csdn.net/qq_42221334/article/details/80336458
rem自适应布局(这个很重要)
在使用vue-cli搭建好项目框架后,在目录结构的index.html文件中添加一段代码:
之后,在写css时,只要将px单位替换成rem,这里设置的比例是100px=1rem,例如,宽度为100px时,可以直接写成1rem。
<script>
fnResize()
window.onresize = function () {
fnResize()
}
function fnResize() {
var deviceWidth = document.documentElement.clientWidth || window.innerWidth
if (deviceWidth >= 750) {
deviceWidth = 750
}
if (deviceWidth <= 320) {
deviceWidth = 320
}
document.documentElement.style.fontSize = (deviceWidth / 7.5*1) + 'px'
}
</script>
数据请求
安装 axios
01. cnpm install axios --save // 直接使用cnpm install来进行安装
02. import axios from 'axios' // 在要使用axios的地方引入axios
域名配置
config/index.js
proxyTable: {
'/apis': {
target: 'http://www.baidu.com', //域名,主要修改这一块
changeOrigin: true,
pathRewrite: {
'^/apis': '/' //注意名字
},
}
},
//修改下面的两个文件,启动的时候自动判断环境来切换域名
//注意单引号里面的双引号
dev.env.js //本地环境配置文件
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_ROOT:'"/apis/"' //本地域名
})
prod.env.js //线上环境配置文件
module.exports = {
NODE_ENV: '"production"',
API_ROOT:'"http://www.baidu.com/"' //线上域名 }
文件中使用
var baseUrl = process.env.API_ROOT;
axios.get(baseUrl+'数据接口') //数据接口一般就是域名后面的东西,后端告知
全局使用axios
首先在主入口文件main.js中引用:
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios);
之后就可以使用了,在组件文件中的methods里去使用了:
getNewsList(){
this.axios.get('api/getNewsList').then