vue实战项目的一些总结

技术栈

因为开发的是一个官网项目, 数据逻辑不是很复杂, 所以这里没有用到vuex, 主要的技术栈有:

vue
vue-router
element-ui
axios
vue-awesome-swiper
animate.css
babel-polyfill 兼容ie
moment
scrollreveal 滚动动画
vue-quill-editor 富文本编辑器
quill-image-extend-module 富文本编辑器中上传图片

项目目录

通过vue-cli搭建, src目录如下:

src // 开发目录
- assets // 资源文件夹
  - images 图片
    - logo.png
    - ...
- axios // 数据请求设置
  - index.js
- components // 公共组件
  - BackTop.vue
  - ...
- pages // 页面
  - home
    - components
      - HomeTitle.vue
      - ...
    - Home.vue
  - ...
- router // 路由设置
  - index.js
- styles // 全局样式文件
  - common.scss
  - mixin.scss
  - ...
- App.vue // 根组件
- main.js // 入口文件

要点

scss

vue-cli 默认支持scss, 但是没有默认安装scss依赖, 需要手动安装, 运行

yarn add sass-loader node-sass

vue-router

异步加载路由方式: router/index.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const home = () => import('@/pages/home/Home')

export default new Router({
    scrollBehavior (to, from, savePosition) {
        return {x: 0, y: 0}  // 解决切换路由时页面不回到顶部的问题
    },
    router: [
        { path: '/home', name: 'Home', component: home},
    ]
})
复制代码

监听路由:

watch: {
    $route (to, from, next) {
        console.log( to, from, next )
    }
}
复制代码

自定义404页面

export default new Router({
    routes: [
        { path: '*', name: 'NotFound', component: notfound },  // 404
    ]
})
复制代码

element-ui

按需加载: 首先，安装 babel-plugin-component：

yarn add babel-plugin-component --dev

修改.babelrc为:

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}
复制代码

main.js

import {
  Message,
  MessageBox,
  Loading
} from 'element-ui'

// Vue.use(Message)  不要使用use, 会导致在页面初始化时弹出空提示框, 直接使用就行了
Vue.use(Loading.directive)
Vue.prototype.$message = Message
Vue.prototype.$msgbox = MessageBox
Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$prompt = MessageBox.prompt

// import 'element-ui/lib/theme-chalk/index.css' 不再需要引用样式文件
复制代码

axios

请求拦截: axios/index.js

import router from '@/router'  // 根据路由判断是否带token
import axios from 'axios'

axios.defaults.baseURL = 'http://xxx/api/'

axios.interceptors.request.use(config => {  // 请求拦截
  const token = sessionStorage.getItem('token')
  if( token && router.history.current.path.indexOf('login') === -1 ) {  // 登录页不带token
    config.headers.Authorization = `baseauth ${token}`
  }
  return config
}, err => {
  return Promise.reject(err)
})

export default axios
复制代码

IE不能识别axios的Promise语法和某些ES6语法, 需要添加babel-polyfill插件:

yarn add babel-polyfill

在main.js的最顶部引入:

import 'babel-polyfill'
复制代码

修改webpack配置, webpack.base.conf.js

module.exports = {
    entry: {
        app: ['babel-polyfill', './src/main.js']
    },
    ...
}
复制代码

favicon.ico

添加ico图标: webpack.dev.conf.js

new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
  inject: true,
+  favicon: path.resolve('favicon.ico')  // 添加.ico图标
})
复制代码

webpack.prod.conf.js

new HtmlWebpackPlugin({
  filename: config.build.index,
  template: 'index.html',
  inject: true,
  favicon: path.resolve('favicon.ico'), //新增
  ...
}
复制代码

行内添加图片

有时候我们需要添加本地的图片, 又想把图片路径设置成变量以便提取成公共组件:



复制代码

"backgroundUrl">


export default {
    data () {
        return {
            backgroundUrl: require('@/assets/images/logo.png')
        }
    }
}
复制代码

yarn build

生产目录不一定是放在服务器的根目录, 所以需要修改config/index.js

build: {
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    // assetsPublicPath: '/',  修改项目相对路径
    assetsPublicPath: './'
    ...
}
复制代码

vue-quill-editor & quill-image-extend-module

VueQuillEditor.vue