Vue 3.0 基本特性搭建

Vue 3.0 基本特性

Performance：性能更比Vue 2.0强。 Tree shaking support：可以将无用模块“剪辑”，仅打包需要的。
Composition API：组合API Fragment, Teleport,
Suspense：“碎片”，Teleport即Protal传送门，“悬念” Better TypeScript
support：更优秀的Ts支持 Custom Renderer API：暴露了自定义渲染API

现在就马上进入搭建吧

基于 vue-cli 快速搭建 Vue 3.0 项目 Vue 3.0 基本特性体验 集成 vue-router 和 vuex 4.0

Vue 3.0 项目初始化 第一步，安装 vue-cli：

npm install -g @vue/cli
注意以下命令是错误的！

npm install -g vue
npm install -g vue-cli
安装成功后，我们即可使用 vue 命令，测试方法：

$ vue -V
@vue/cli 4.3.1
第二步，初始化 vue 项目：

vue create vue-next-test

输入命令后，会出现命令行交互窗口，这里我们选择 Manually select features：

Vue CLI v4.3.1
? Please pick a preset: 
  default (babel, eslint) 
❯ Manually select features 

随后我们勾选：Router、Vuex、CSS Pre-processors 和 Linter / Formatter，

这些都是开发商业级项目必须的：

Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project: 
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
 ◉ CSS Pre-processors
❯◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

注意：Vue 3.0 项目目前需要从 Vue 2.0 项目升级而来，所以为了直接升级到 Vue 3.0 全家桶， 我们需要在 Vue
项目创建过程中勾选 Router 和 Vuex，所以避免手动写初始化代码 升级 Vue 3.0 项目 目前创建 Vue 3.0
项目需要通过插件升级的方式来实现，

vue-cli 还没有直接支持，我们进入项目目录，并输入以下指令：

cd vue-next-test
vue add vue-next

执行上述指令后，会自动安装 vue-cli-plugin-vue-next 插件（查看项目代码），该插件会完成以下操作：

安装 Vue 3.0 依赖 更新 Vue 3.0 webpack loader 配置，使其能够支持 .vue 文件构建（这点非常重要） 创建
Vue 3.0 的模板代码 自动将代码中的 Vue Router 和 Vuex 升级到 4.0 版本，如果未安装则不会升级 自动生成 Vue
Router 和 Vuex 模板代码 完成上述操作后，项目正式升级到 Vue 3.0，

注意该插件还不能支持 typescript，用 typescript 的同学还得再等等。（就是目前还不太支持TS）

Vue 3.0 基本特性体验 下面我们从项目开发的角度逐步体验 Vue 3.0 的开发流程

创建路由 项目开发中，我们通常需要创建新页面，然后添加路由配置，

我们在 /src/views 目录下创建 Test.vue：

<template>
  <div class="test">
　　   <h1>vue3.0 初体验</h1>
　　   <p>少年你的头发可还好，？？？？ 哈哈哈哈哈</p>
  </div>
</template>

<script>
 export default {
 }
</script>

<style lang="less" scoped>
.test {
  color: red;
}
</style>

之后在 /src/router/index.js 中创建路由配置：

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/test',
    name: 'Test',
    component: () => import(/* webpackChunkName: "test" */ '../views/Test.vue')
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

初始化 Vue Router 的过程与 3.0 版本变化不大，只是之前采用构造函数的方式， 这里改为使用 createRouter 来创建
Vue Router 实例， 配置的方法基本一致，配置完成后我们还需要在 App.vue 中增加链接到 Test.vue 的路由：

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/test">Test</router-link>
    </div>
    <router-view/>
  </div>
</template>

启动项目：

npm run serve