vue的安装及创建一个新项目前一篇文章已经介绍过了，有需要的请看之前的文章
移动端项目
一、关于移动端的一些ui框架
1.Voinc 一个基于 vue.js 和 ionic 样式的 UI 框架（https://wangdahoo.github.io/vonic-documents/#/?id=%E4%BB%8B%E7%BB%8D）
2.Vux 基于WeUI和Vue(2.x)开发的移动端UI组件库 （https://vux.li/#/?id=%E7%AE%80%E4%BB%8B）
3. NutUI 京东轻量级移动端Vue组件库（https://nutui.jd.com/#/index）
4. .Mint UI 由饿了么前端团队推出的 Mint UI （http://mint-ui.github.io/docs/#/zh-cn2）
5. Vant是有赞前端团队基于有赞统一的规范实现的 Vue 组件库（https://github.com/youzan/zent）
6. Cube UI 滴滴 WebApp实现的移动端组件库（https://didi.github.io/cube-ui/#/zh-CN/docs/quick-start）
二、移动端适配
方案：lib-flexible会自动在html的head中添加一个meta name="viewport"的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。使用postcss-px2rem-exclude自动将css中的px转成rem
步骤：1.项目中引入lib-flexible npm install lib-flexible --save
2.在项目的入口main.js文件中引入lib-flexible import ‘lib-flexible/flexible.js’
3.安装postcss-px2rem-exclude npm install postcss-px2rem-exclude --save
4.在项目的根目录下找到文件.postcssrc.js，在里面添加如下代码
"postcss-px2rem-exclude": { remUnit: 75, exclude: /node_modules|folder_name/i // 忽略node_modules目录下的文件（引入的第三方ui的样式不会随之改变） } - 1
- 2
- 3
- 4
- 5
5.在依赖文件node_modules中找到postcss-px2rem-exclude文件中的lib下的index.js添加以下代码（引入的第三方ui的样式不会随之改变）
try { var flag = options.exclude.includes('/') if (flag) { var arr = options.exclude.split('/') options.exclude = new RegExp(arr[1], arr[2]) } } catch (error) {} - 1
- 2
- 3
- 4
- 5
- 6
- 7
二.一 安装sass-loader(如果使用到了sass编译再安装，不使用无需安装)
npm install --save-dev sass-loader //sass-loader依赖于node-sass ,所以继续安装node-sass npm install --save-dev node-sass //注意1.安装node-sass会报错的原因，一般是因为网慢，所以安装node-sass的时候可以使用cnpm安装 //注意2.sass-loader安装了但是编译还是报错，原因可能是sass-loader版本的问题（8.0.0），在package.json中把sass-loader的版本改成7.3.1，然后删除依赖项，重新安装依赖 - 1
- 2
- 3
- 4
- 5
三、给IDE装vue插件（我现在使用的是vscode，就以vscode为例）
1.在vscode扩展里搜索Vetur
2.安装完成进行配置
文件–>首选项–>用户代码片段–>点击新建代码片段–取名vue.json 确定
3.删除多余代码
4.粘贴下边的代码vue模板 （如果使用css预编译，则style的类型是scss，如不使用改为css）
{ "Print to console": { "prefix": "vue", "body": [ "<!-- $1 -->", "<template>", "<div class='$2'>$5</div>", "</template>", "", "<script>", "//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）", "//例如：import 《组件名称》 from '《组件路径》';", "", "export default {", "//import引入的组件需要注入到对象中才能使用", "components: {},", "data() {", "//这里存放数据", "return {", "", "};", "},", "//监听属性 类似于data概念", "computed: {},", "//监控data中的数据变化", "watch: {},", "//方法集合", "methods: {", "", "},", "//生命周期 - 创建完成（可以访问当前this实例）", "created() {", "", "},", "//生命周期 - 挂载完成（可以访问DOM元素）", "mounted() {", "", "},", "beforeCreate() {}, //生命周期 - 创建之前", "beforeMount() {}, //生命周期 - 挂载之前", "beforeUpdate() {}, //生命周期 - 更新之前", "updated() {}, //生命周期 - 更新之后", "beforeDestroy() {}, //生命周期 - 销毁之前", "destroyed() {}, //生命周期 - 销毁完成", "activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发", "}", "</script>", "<style lang='scss' scoped>", "//@import url($3); 引入公共css类", "$4", "</style>" ], "description": "Log output to console" } } - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
6.上面代码中的 “prefix”: “vue”, 就是快捷键；保存好之后新建.vue结尾的文件试试(输入vue 按tab键就可以)
四、vue路由
1.定义组件，刚刚已经用模板定义了一个组件
2.在router index.js文件里引入刚刚写好的组件
我在这里是用的vue-router提供的按模块加载方式
下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。
const ImportFuncDemo1 = () => import('../components/ImportFuncDemo1')
const ImportFuncDemo2 = () => import('../components/ImportFuncDemo2')
- 1
- 2
下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。
// const ImportFuncDemo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo')
// const ImportFuncDemo2 = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo2')
- 1
- 2
3.配置
import Vue from "vue"; import VueRouter from "vue-router"; Vue.use(VueRouter) // 按模块加载... const HelloWorld= () => import('../components/HelloWorld') const routes=[{ path: '/', redirect: '/HelloWorld', name:'HelloWorld' },{ path:'/HelloWorld', component: HelloWorld, name:'HelloWorld' } ] const router = new VueRouter({ routes, mode: 'history', // vuex的严格模式 strict: process.env.NODE_ENV !== 'production', // 这个整体做的是：在路由的history模式下，一些列表页利用缓存模式来记录位置（一般是返回不刷新，前进刷新）,一般用了scrollBehavior， //同时还用keep-alive(缓存),activated(缓存下触发的钩子)配合做列表页的返回记录位置。缓存模式也有坑，就是何时清除缓存，一般是从新进入页面就清除。 //回到主题，滚动行为就是：例如一个列表页，滑动了很多，点进去、再返回记录刚刚的位置 scrollBehavior (to, from, savedPosition) { if (savedPosition) { return savedPosition } else { if (from.meta.keepAlive) { from.meta.savedPosition = document.body.scrollTop; } return { x: 0, y: to.meta.savedPosition ||0} } } }) export default router - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
4.路由文件注入到main.js文件中
import Vue from 'vue'; import router from './router/index'; import 'lib-flexible/flexible.js'; import App from './App' new Vue({ el: '#app', router, components: { App }, template: '<App/>' }) - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
5.在 app.vue里配置router-view
<template> <div id="app"> <router-view></router-view> </div> </template> - 1
- 2
- 3
- 4
- 5
6.路由跳转及传参方式
1.$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
2.$route为当前router跳转对象，里面可以获取name、path、query、params等
（1）设置动态路由
{
path:'/shopDetails/:id',
component: shopDetails,
name:'shopDetails'
}
跳转this.$router.push('/shopDetails/'+id)
获取id通过 this.$route.params.id
（2）通过params携带参数 ,路由属性中的name来匹配路由
{
path:'/shopDetails',
component: shopDetails,
name:'shopDetails'
}
跳转 this.$router.push({name:'shopDetails',params:{id:id}})
获取 this.$route.params.id
（3）通过path匹配路由，query携带参数 这种情况下 query传递的参数会显示在url后面?id=？
{
path:'/shopDetails',
component: shopDetails,
name:'shopDetails'
}
跳转 this.$router.push({path:'/shopDetails',query:{id:id}})
获取 this.$route.query.id
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
7.query和params的区别
1.动态路由和query属性传值 页面刷新参数不会丢失， params会丢失 2.动态路由一般用来传一个参数时居多(如详情页的id), query、params可以传递一个也可以传递多个参数 。
2.直白的来说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示
8.路由的模式
五、axios请求
axios文档上的教程在这里就不重复叙述了，需要的看文档，我在这里贴下我的使用教程
axios文档地址：https://www.npmjs.com/package/axios
1.安装 npm install axios
2.在utils下新建一个axios文件用来配置axios
import axios from 'axios'; const qs = require('qs'); const service=axios.create({ baseURL: process.env.BASE_API, //请求公共地址，baseURL`将被添加到`url`，所以后边请求只需api的方式即可 timeout: 5000, //请求响应时间 }) // 是否携带cookie信息，默认为false，根据项目需求设置 service.defaults.withCredentials = true; // 添加一个请求拦截器 service.interceptors.request.use(function (config) { // 对请求数据做些事 if(config.method === 'post'){ //post传参序列化 config.data = qs.stringify(config.data); } return config; }, function (error) { return Promise.reject(error); }); // 添加一个响应拦截器 service.interceptors.response.use(function (response) { // 对响应数据做些事 return response; }, function (error) { console.log(error) // Do something with response error return Promise.reject(error); }); export default service; - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
3.新建一个api文件，这里边存放所有的请求函数，方便查找管理
import axios from '../utils/axios'; // 首页banner export function banner(){ return axios({ url:'/wxchat/xxx.action', //请求的地址 method:'POST' }) } // post请求带参数 export function qiang(activityStatusType){ return axios({ url:'/wxchat/xxx.action', method:'POST', data:{activityStatusType:activityStatusType} }) } // get请求 export function moneys(){ return axios({ url: '/sd-web/xxx', method: 'get' }); } // get请求带参数 export function moneys(ids){ return axios({ url: '/sd-web/xxx', method: 'get'， params:{id:ids} }); } - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
4.页面实际应用
import {banner} from '../../api/api'; //在页面上引入需要的请求函数 //在生命周期函数或者需要的方法里运用 mounted() { banner().then(response => { this.banner=response.data.data.SlAdvertisTabList }).catch(err=>{ console.log(err) }); }, - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
5.跨域配置
（1）在config文件夹写的index.js里配置跨域
proxyTable: { '/wxchat': { target: 'xxx', //目标接口域名 changeOrigin: true, //是否跨域 secure: false, //target默认情况下，不接受运行在HTTPS上，且使用了无效证书的后端服务器。如果你想要接受, 则需设置该项为false // pathRewrite: { // 如果接口本身没有/wxchat需要通过pathRewrite来重写了地址 重写接口 // '^/wxchat: ' ' // } } }, - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
注：我写的这个项目里，本身存在/wechat通用前缀，所以我没有用pathRewrite重写，如果你们接口里没有通用前缀的话，是要进行重写的
上面配置中,’^/wxchat’ 其实是一个正则表达式
‘^/wxchat’ 应该拆分成 ‘^’ 和 ‘/wxchat’ 两个字符串，其中 ‘^’ 匹配的是字符串最开始的位置。
‘/wxchat’: {}, 就是告诉node, 我接口只要是’/wxchat’开头的才用代理.所以你的接口就要这么写/wxchat/xx/xx. 最后代理的路径就是 http://xxx.xx.com/wxchat/xx/xx.
可是不对啊, 我正确的接口路径里面没有/wxchat啊. 所以就需要 pathRewrite,用’’^/wxchat’’:’’, 把’/wxchat’去掉, 这样既能有正确标识, 又能在请求接口的时候去掉wxchat
接口没有通用前缀的开发环境的配置
'use strict' const merge = require('webpack-merge') const prodEnv = require('./prod.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"', BASE_API: '"/wechat"', //在跨域里配置的//wechat，接口里就不用写通用前缀了，就按照正常接口写就可以了 }) - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
接口有通用前缀的开发环境配置
'use strict' const merge = require('webpack-merge') const prodEnv = require('./prod.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"', BASE_API: '""', //这里为空就好了，通用前缀就写在接口里 }) - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
六、vuex的使用
关于vuex的使用 ，什么时候该使用vuex？ 当你觉得需要全局的状态，但是通过别的方式又太麻烦的时候，你就需要了，比如说我现在做的一个app项目，header组件是一个公共组件，那么header组件里边的标题怎么能随着页面的跳转而改变呢，vuex就可以做到 （个人理解，有不同理解的可以评论）
缺点：vuex页面重新刷新，数据会丢失 解决方法：存本地，state数据可以从本地获取
1.vuex中，有默认的五种基本的对象：
- state 全局要访问的值
- getters 实时监听state值的变化，对数据获取之前的再次编译，可以理解为state的计算属性。
- mutations 改变state里的初始值 同步的
- actions 异步触发mutations里面的方法
- modules：store的子模块，为了开发大型项目，方便状态管理而使用的。这里我们就不解释了，用起来和上面的一样。
2.下载安装vuex npm install vuex --save
3.在src下新建一个store文件夹创建一个index.js 用来配置.
4.引入vue，vuex，使用use全局注入插件
import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store=new Vuex.Store({ // 设置全局要访问的state值 state:{ title:'测试标题', //头部标题 } }) export default store; - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
5.在main.js里引入store,并全局注入
import Vue from 'vue'; import router from './router/index'; import store from './store'; import 'lib-flexible/flexible.js'; import App from './App' new Vue({ el: '#app', router, store, components: { App }, template: '<App/>' }) - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
6.在任意组件内测试刚刚写的标题
<template> <div class='orderDetails'> {{$store.state.title}} </div> </template> - 1
- 2
- 3
- 4
- 5
7.如图所示，刚刚的标题已经设置成功了
8.上图所示已经成功设置了标题，那怎么让它的标题改变呢，就要用到mutations对象了，我们在mutations对象里定义一个改变标题的方法，mutations里面的参数，第一个默认为state，接下来的为自定义参数。
// 改变state里的初始值 同步的 mutations :{ TITLE(state,title){ return state.title=title }, }, - 1
- 2
- 3
- 4
- 5
- 6
9.看下测试结
9.从图上可以看出这个已经实现了，接下来看异步操作
// 异步触发mutations里面的方法 在外部组件里进行全局执行actions里面方法的时候，你只需要用执行this.$store.dispatch('title'，132) 这样就可以全局改变改变标题的值了 actions:{ title({commit},title){ commit('TITLE',title) }, } - 1
- 2
- 3
- 4
- 5
- 6
就不上图了，跟之前同步操作是一样的结果
10.vuex同步和异步的区别
1、当点发送过快，页面中渲染的内容与state中的数据不一致，vuex里面的state变得慢，且不持续更新
2、action中是可以做到页面中state中数据保持一致
3、当你的操作行为中含有异步操作，比如向后台发送请求获取数据，就需要使用action的dispatch去完成了。其他使用commit即可。
七、打包上线
1.
执行 npm run build 命令
- 1
2.执行完成后，你会发现你的目录下多了一个dist的文件夹，这个就是打包的数据
3.打包之后出现页面空白的原因
3.1 css，js路径引用错误的问题
解决：到config文件夹中打开index.js文件。
文件里面有两个assetsPublicPath属性，更改第一个，也就是更改build里面的assetsPublicPath属性：
assetsPublicPath属性作用是指定编译发布的根目录，‘/’指的是项目的根目录 ，’./’指的是当前目录。
3.2 设置路由history模式
解决：改为hash或者直接把模式配置删除，让它默认的就行 。如果非要使用history模式的话，需要你在服务端加一个覆盖所有的情况的候选资源：如果URL匹配不到任何静态资源，则应该返回一个index.html,这个页面就是你app依赖页面。
3.3 在css中引入的背景图片的路径问题
解决：到build文件夹中打开util.js文件,添加路径代码
