Vue学习 Vue SSR + Vuex

github 项目地址

预览

效果图1

效果图2

效果图3

效果图3.jpg

说明

vue学习整理
未严格按照Vue风格指南
旨在学习与交流vue语法以及基本入门
由于对css了解不深入，使用了FlexBox布局，界面样式可忽略

功能

基于nuxt搭建项目
axios数据请求以及跨域问题解决方案
router（页面跳转动画等）
vuex基本用法封装与实现,全局store，修改主题等（暂未实现语言全球化）。
vuex深入，模块下store（module），经典的记事本(任务管理)demo
支持vuex logger日志打印
基本组件封装
组件传值（props）
子父组件互调用
封装模态框以及slot的使用
eslint配置（暂未配置）

参考文档

vue
nuxt

依赖库

vue
vue服务端渲染：nuxt
Node.js服务器端呈现：vue-server-renderer
vue路由管理器：vue-router
Vue Loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件: vue-loader,中文文档
Webpack的Vue样式加载程序模块:vue-style-loader
日期处理类库：moment

运行项目

clone项目或者直接下载压缩包

git clone https://github.com/weifengzz/qz-weather-vue.git

安装依赖

    npm install

    yarn

运行

    npm run dev

打开网页，输入网址

    http://localhost:9002/

axios跨域问题

添加 @nuxtjs/axios，@nuxtjs/proxy 依赖库

    npm install @nuxtjs/axios @nuxtjs/proxy --dev

在nuxt.config.js文件中配置

    modules: [
      '@nuxtjs/axios',
      '@nuxtjs/proxy'
    ],
    axios: {
      proxy: true
    },
    proxy: {
      '/api': {
        target: 'http://t.weather.sojson.com/api/weather/city/',
        pathRewrite: {
          '^/api' : '/'
        }
      }
    }

详情请参考

计算属性 computed

计算属性文档
例1(无参数)：

...
<p class="q-release-time-text">{{ releaseTime }} 发布</p>
....

export default {
  ...
  computed: {
    // 使用计算属性，获取发布时间
    releaseTime: () => {
      return moment().format('hh:mm:ss')
    }
  }
  ...
}

例2（有参数）

...
<p class="q-release-time-text">{{ releaseTime('hh:mm:ss') }} 发布</p>

....

export default {
  ...
  computed: {
    // 使用计算属性，获取发布时间
    releaseTime: () => {
      return  (format) => {
        return moment().format(format)
      }
    }
  }
  ...
}

vue组件 : 符号的作用

:是v-bind的缩写，是为了动态绑定数据。

  <!-- 完整语法 -->
  <a v-bind:href="url">...</a>

  <!-- 缩写 -->
  <a :href="url">...</a>

vue中 @ 符号的作用

@是v-on的缩写。

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

动态设置样式

动态绑定class写法 :

<div :class="{'bor':clicked==index}"></div>

动态绑定style

  <div :style="{ 'background-color': theme.color }">

vuex的使用

说明：vuex封装的比较好相对于redux简单
参考资料：5分钟带你入门vuex（vue状态管理）
官方参考资料: vuex
如果想深入了解，请参考：redux基本原理

发布部署

参考文档
package.json配置

....

  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start"
  },

...

执行build命令

 npm run build

执行启动服务命令

  npm run start

可使用pm2: pm2是node进程管理工具,可以利用它来简化很多node应用管理的繁琐任务,如性能监控、自动重启、负载均衡等,而且使用非常简单。

最后编辑于：2019.07.22 17:57:52