# vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，易于上手。Vue 也完全能够为复杂的单页应用提供驱动。

# 声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Hello Vue!

export default {
  data() {
    return {
      message:""
    }
  },

export default {
  data: () => ({
      message:"",
  }),

# Vue CLI

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

通过 @vue/cli 搭建交互式的项目脚手架。

创建一个项目 vue create

vue create hello-world

vue init webpack hello-world

TypeScript 版本請看 TypeScript支持

提示

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

可以使用下列任一命令安装这个新的包：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。

你还可以用这个命令来检查其版本是否正确：

vue --version
# OR
vue -V

# Vue 3

Vue-3-Firebase

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Learning Vue</title>
  <script src="https://unpkg.com/vue@3.0.0"></script>
</head>
<body>
  <h1>Hello, Vue :)</h1>

  <div id="app">
    <p>{{ title }} - by {{ author }}, {{ age }} years old</p>
  </div>

  <!-- does not work -->
  {{ title }}

  <script src="app.js"></script>
</body>
</html>

app.js

const app = Vue.createApp({
  // data, functions etc
  // template: '<h2>I am the template</h2>',
  data() {
    return {
      title: 'The Way of Kings',
      author: 'Brandon Sanderson',
      age: 45
    }
  }
})

app.mount('#app')

# Composition API

Group logic together in a setup function Easily create reusable logic (functions)

Options API

export default {
  data() {

  },
  methods: {

  },
  computed: {

  },
  //lifecycle hooks
  mounted() {

  }
}

Composition API

export default {
  setup() {
    //data
    //methods
    //computed
    //lifecycle hooks
  }
}

# env

vue.config.js

  devServer: {
    port: devServerPort,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    progress: false,
    proxy: {
      // change xxx-api/login => /mock-api/v1/login
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://127.0.0.1:${mockServerPort}/mock-api/v1`,
        changeOrigin: true, // needed for virtual hosted sites
        ws: true, // proxy websockets
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    }

.env.development

# Base api
VUE_APP_BASE_API = '/dev-api'

.env.production

# Remeber to change this to your production server address
# Here I used my mock server for this project
VUE_APP_BASE_API = 'https://vue-typescript-admin-mock-server.armour.now.sh/mock-api/v1/'

Vue 实例 →