VUE新建项目
安装cli
sudo npm install -g @vue/cli
sudo npm install -g --unsafe-perm @vue/cli //mac 安装报异常使用这个
vue create vue-demo
$ cd vue-demo
$ npm run serve
安装 router
npm install vue-router --save-dev
使用router
//创建router.js
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
redirect:'/HelloWorld'
},
{
path:'/HelloWorld',
component: resolve => require(['../components/HelloWorld.vue'], resolve),
},
]
})
//在APP.vue使用router-view
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
* {
padding: 0; /*清除内边距*/
margin: 0; /*清除外边距*/
}
</style>
在main.js中配置router
import Vue from 'vue'
import App from './App.vue'
import router from './router/router.js'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router,
}).$mount('#app')
创建Banner.vue组件
安装swiper组件
npm install vue-awesome-swiper
<template>
<div class="banner">
<swiper :options="options">
<swiper-slide v-for="item in bannerItem" :key="item.id">
<div @click="bannerClick(item)">
<img :src="item.visitUrl" alt />
<!-- <div>{{item.visitUrl}}</div> -->
</div>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
import "swiper/css/swiper.min.css"; //引入swiper的css样式
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
name: "banner",
props: ["imgs"], //获取传递进来的数据
components: {
swiper,
swiperSlide
},
data() {
return {
bannerItem: this.imgs,
//swiper的配置参数
options: {
//自动滚动
autoplay: {
delay: 5000, //自动滚动间隔时间
disableOnInteraction: false //是否允许用户打断滑动，默认为true
},
pagination: {
el: ".swiper-pagination",
clickable: true
},
centeredSlides: true,
paginationClickable: true
}
};
},
methods: {
bannerClick(item) {
console.log("点击banner", item);
}
}
};
</script>
<style >
.banner {
height: 170px;
padding: 10px;
}
.banner img {
width: 100%;
height: 170px;
min-height: 170px;
min-width: 100%;
border-radius: 5px;
}
</style>
使用Banner.vue
<template>
<div>
<!-- <h1>这是title</h1> -->
<banner :imgs="bannerItem"></banner>
</div>
</template>
<script>
import banner from "./Banner.vue";
export default {
name: "home",
components: {
banner
},
data() {
return {
bannerItem: [
{
visitUrl:
"https://tk-conline-20190225-1257840667.cos.ap-beijing.myqcloud.com/conline-test/banner.jpg",
id: 1
},
{
visitUrl:
"https://tk-conline-20190225-1257840667.cos.ap-beijing.myqcloud.com/online-customer/1581478851959758.png",
id: 2
}
]
};
}
};
</script>
移动端适配
- 安装px2rem-loader(devDependencies)
npm install px2rem-loader --save-dev
- 移动端适配解决npm包 "lib-flexible" (dependencies)
npm install lib-flexible --save
- main.js中引入 "lib-flexible"
import 'lib-flexible' // 移动端适配 (目录: vue-demo/src/main.js)
- 创建 "vue.config.js" (目录:vue-demo/vue.config.js)
module.exports = {
chainWebpack: (config) => {
config.module
.rule('css')
.test(/\.css$/)
.oneOf('vue')
.resourceQuery(/\?vue/)
.use('px2rem')
.loader('px2rem-loader')
.options({
remUnit: 75
})
}
}
Banner.vue等页面中根据750px设计图写页面
-
使用
直接写px，编译后会直接转化成rem —- 除开下面两种情况，其他长度用这个 在px后面添加/*no*/或者将px大写PX，不会转化px，会原样输出。 — 一般border需用这个 在px后面添加/*px*/,会根据dpr的不同，生成三套代码。—- 一般字体需用这个
部署到github Page
在github新建项目 vue-demo
在github创建一个类似liuhe37186.github.io这样格式的GitHub仓库
-
在
vue.config.js中设置正确的publicPath。如果打算将项目部署到
https://<USERNAME>.github.io/上,publicPath将默认被设为"/"，你可以忽略这个参数。如果打算将项目部署到
https://<USERNAME>.github.io/<REPO>/上 (即仓库地址为https://github.com/<USERNAME>/<REPO>)，可将publicPath设为"/<REPO>/"。举个例子，如果仓库名字为“vue-demo”，那么vue.config.js的内容应如下所示：module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/vue-demo/' : '/' } -
然后将本地项目push到远程master （非必须）
#git init #git add README.md #git commit -m "first commit" git remote add origin https://github.com/liuhe37186/vue-demo.git git push -u origin master -
主要是下面这一步，将打包后的dist文件夹push到gh-pages
npm run build git checkout -b gh-pages git add -f dist git commit -m 'first commit' git subtree push --prefix dist origin gh-pages
-
在Setting里设置，用哪个分支部署，默认是gh-pages分支
自动部署
- 在项目根目录创建脚本deploy.sh
# !/usr/bin/env sh # 当发生错误时中止脚本 set -e # 构建 npm run build # cd 到构建输出的目录下 cd dist # 部署到自定义域域名 # echo 'www.example.com' > CNAME git init git add -A git commit -m '部署page' # 部署到 https://<USERNAME>.github.io git push -f https://github.com/liuhe37186/vue-demo.git master:gh-pages # 部署到 https://<USERNAME>.github.io/<REPO> # git push -f https://github.com/xjinky/hello-world.git master:gh-pages # 提交到gh-master分支 # git push -f https://github.com/liuhe37186/vue-demo.git master # 提交到master分支 cd -在项目根目录执行命令 sh deploy.sh 自动部署
-
在package.json文件中添加脚本命令
"scripts": { "dev": "vue-cli-service serve --open", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "pro": "sh deploy.sh" }, 执行 npm run pro 可自动部署
网络请求
-
安装axios
$ npm install axios --save -
引入
import axios from 'axios'; -
配置请求参数
//设置超时时间 axios.defaults.timeout = 15000; //设置全局的请求次数，请求的间隙 axios.defaults.retry = 4; axios.defaults.retryDelay = 1000; //设置请求baseURL地址 axios.defaults.baseURL = process.env.VUE_APP_BASEURL;
-
get请求
/** * 封装get方法 * @param url * @param data * @returns {Promise} */ export function get(url, params = {}) { return new Promise((resolve, reject) => { axios.get(url, { params: params }).then(response => { resolve(response.data); }).catch(err => { reject(err) }) }) } -
post请求
/** * 封装post请求 * @param url * @param data * @returns {Promise} */ export function post(url, data = {},config={currContentType:"") { console.log("--------post$url:",url) console.log("-------post$data:",data) return new Promise((resolve, reject,config) => { axios.post(url, data).then(response => { console.log("--------post$response-----",response,"-------response$end------") resolve(response.data); }, error => { console.log("--------post$error-----",error,"-------error$end------") reject(error) }) }) } -
请求拦截器
const currContentType = { urlencoded: "application/x-www-form-urlencoded;charset=utf-8", fromData: "ipart/form-data;charset=utf-8", json: "application/json;charset=utf-8", xml: "text/xml;charset=utf-8", form:"multipart/form-data;charset=utf-8" }; //http request 请求拦截器 axios.interceptors.request.use( config => { console.log("--------interceptors$request$enter--------",config) if (config.currContentType == "json") { config.headers = { "Content-Type": currContentType.json }; } else { //不传走表单 config.headers = { "Content-Type": currContentType.urlencoded }; config.data = qs.stringify(config.data); } console.log("--------interceptors$request$config--------",config,"--------end--------") return config; }, error => { return Promise.reject(error); } );
-
响应拦截器
//添加响应之后拦截器 axios.interceptors.response.use(function(response) { //对响应数据做些事 console.log("------interceptors$response$response------") return response; }, function(error) { //请求错误时做些事 console.log("------interceptors$response$error------") return Promise.reject(error); });
