vue移动端，基本架构搭建

vue官网

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

基本架子搭起来了

中间用到的文件会统一放在附件里

1.首先是rem布局和动画引入

将rem布局js和css3动画放到文件static中，在index.html中引入

2.动态更改title。微信端

vue-wechat-title详细文档

cmd命令

npm install vue-wechat-title --save

main.js

Vue.use(require('vue-wechat-title'))

路由配置

const routes = [
{
name: 'Home',
path: '/home',
meta: {
title: '首页'  //改变title为首页
},
component: require('../views/Home.vue')
},
]

设置使用

<router-view v-wechat-title="$route.meta.title" img-set="/static/logo.png"></router-view>

3.vuex状态管理

cmd命令

npm install vuex --save

main.js

import Vuex from 'vuex'
Vue.use(Vuex)

4.vuex状态持久化

vuex-persistedstate详细

npm install vuex-persistedstate

在store.js里

import createPersistedState from 'vuex-persistedstate'
const state = {
user:{},
}
export default new Vuex.Store({
state,
getters,
actions,
mutations,
plugins: [createPersistedState()]//会自动保存创建的状态。刷新还在
});

5.axios请求

cmd命令

npm install axios --save

main.js

import axios from './http'  //http.js文件，即全局配置axios请求，与main.js在同级目录
Vue.prototype.$http = axios

6.上传图片组件vue-core-image-upload

vue-core-image-upload

npm install --save vue-core-image-upload@2.3.10 //固定版本2.3.10

使用的组件中

<vue-core-image-upload
:class="['btn', 'btn-primary']"
:crop="false"
@imageuploaded="imageuploaded"
:data="data"
:max-file-size="5242880"
url="your server url" >
</vue-core-image-upload>

import VueCoreImageUpload  from 'vue-core-image-upload';

components: {
'vue-core-image-upload': VueCoreImageUpload
},

7.mint-ui

npm i mint-ui -S

main.js

import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import './assets/css/my-mint.scss'// 全局修改mint-UI样式

8.scss使用

npm install --save-dev sass-loader //sass-loader依赖于node-sass
npm install --save-dev node-sass

组件中

<style lang="sass">scss</style>

9.错误页配置

路由配置

import Error from '@/views/Error.vue'
{
path: '*',
component: Error
},

当url不是我们的路由时，报错404