Front Tec

Vue相关

基础

vue

vue-router

<div id="app">
  <router-view></router-view>
</div>

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

vuex

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

typescript集成

vuex-router-sync

同步vue-router的当前$route作为vuex存储状态的一部分。

import Vue from 'vue'
import App from './App.vue'
import { createRouter } from './router'
import { sync } from 'vuex-router-sync'

export function createApp (ssrContext) {
    const router = createRouter()
    const app = new Vue({
        router,
        ssrContext,
        render: h => h(App)
    })
    return { app, router }
}

vue-loader

基于webpack的vue组件加载器

vue-template-compiler

此包可用于将Vue 2.0模板预编译为呈现函数，以避免运行时编译开销和CSP限制。只有在编写具有特定需求的构建工具时才需要它。在大多数情况下，您应该使用vue-loader或vueify，两者都在内部使用这个包。

const compiler = require('vue-template-compiler');

compiler.compile('<div v-test></div>', {
  directives: {
    test (node, directiveMeta) {
      // transform node based on directiveMeta
    }
  }
})

vuedraggable

基于vue的可拖拽组件

服务端渲染

nuxt.js

vue服务端渲染框架

https://zh.nuxtjs.org/nuxt-schema.svg

nuxt创建-部署

创建

  1. npx方式
$ npx create-nuxt-app <项目名>
  1. yarn方式
$ yarn create nuxt-app <项目名>

创建时一步一步按提示走就行了

运行

$ npm run dev

浏览器访问：http://127.0.0.1:3000/

打包

$ npm run build

部署

  1. 新建目录 test 然后把 .nuxt、static、nuxt.config.js和package.json复制进来
├── test
│   ├── .nuxt
│   ├── static
│   ├── nuxt.config.js
└── └── package.json
  1. 安装依赖
$ npm install
  1. 修改package.json的启动脚本



 





"scripts": {
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
}
  1. 启动访问
$ npm start

浏览器访问：http://localhost:3000

静态部署

$ npm run generate

此命令会生成dist目录，所有静态化后的资源文件均在其中。

generate配置：https://zh.nuxtjs.org/api/configuration-generate/

nuxt.config.js

module.exports = {
  generate: {
    routes: [
      '/users/1',
      '/users/2',
      '/users/3'
    ]
  }
}

vue-server-renderer

vue-server-renderer就是vue中处理服务端加载的模块

// 第 1 步：创建一个 Vue 实例
const Vue = require('vue')
const app = new Vue({
  template: `<div>Hello World</div>`
})

// 第 2 步：创建一个 renderer
const renderer = require('vue-server-renderer').createRenderer()

// 第 3 步：将 Vue 实例渲染为 HTML
renderer.renderToString(app, (err, html) => {
  if (err) throw err
  console.log(html)
  // => <div data-server-rendered="true">Hello World</div>
})

// 在 2.5.0+，如果没有传入回调函数，则会返回 Promise：
renderer.renderToString(app).then(html => {
  console.log(html)
}).catch(err => {
  console.error(err)
})

vue-meta

用于管理HMTL头部标签

<template>
  ...
</template>
 
<script>
  export default {
    metaInfo: {
      title: 'My Example App', // set a title
      titleTemplate: '%s - Yay!', // title is now "My Example App - Yay!"
      htmlAttrs: {
        lang: 'en',
        amp: undefined // "amp" has no value
      }
    }
  }
</script>

native开发

vue native

native开发框架

vue-native

vue-native

weex

weex

← React相关 →