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