Vue3.0+vue-router-next+vuex4.0+typescript项目搭建

Vue3.0

Vue3.0是2020年4月刚刚发布了beta版本的全新Vue版本

项目地址:

https://github.com/kaiqiangren/vue-next-ts-preview

一、Vue3.0与Vue2.0的对比:

优点：

1. 将Vue内部的绝大部分api对外暴露，使Vue具备开发大型项目的能力，例如compile编译api等
2. webpack的treeshaking支持度友好
3. 使用Proxy进行响应式变量定义，性能提高2-3倍
4. 可在Vue2.0中单独使用composition-api插件，或者直接用它开发插件
5. 对typescript支持更加友好
6. 面向未来：对于尤雨溪最近创新的vite开发服务器（舍弃webpack、底层为Koa框架的高性能开发服务器）,直接使用的Vue3.0语法

缺点:

1. 只支持IE11及以上
2. 对于习惯了Vue2.0开发模式的开发者来说，增加了心智负担，对开发者代码组织能力有考验

同时也是能力提升的机会吧，特别喜欢Vue作者的设计初心:让开发者随着框架一起成长!

二、Vue3.0正确的打开方式

1、项目搭建

1. 需要安装vue-cli4代最新脚手架，可以通过执行如下npm 命令安装/更新脚手架版本

npm i @vue/cli -g

2. 然后在创建项目后，执行vue add vue-next向项目添加Vue3.0

vue create [projectName]
cd [projectName]
vue add vue-next

3. 如下例子为使用typescript + Vue3.0 开发的项目依赖，也可以直接使用

{
   
  "name": "vue-next-ts-preview",
  "version": "0.1.0",
  "private": true,
  "scripts": {
   
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "dev": "vue-cli-service serve"
  },
  "dependencies": {
   
    "core-js": "^3.6.4",
     "normalize.css": "^8.0.1",
     "vue": "^3.0.0-beta.14",
     "vue-router": "^4.0.0-alpha.12",
     "vuex": "^4.0.0-beta.2"
  },
  "devDependencies": {
   
    "@typescript-eslint/eslint-plugin": "^2.26.0",
    "@typescript-eslint/parser": "^2.26.0",
    "@vue/cli-plugin-babel": "~4.3.0",
    "@vue/cli-plugin-eslint": "~4.3.0",
    "@vue/cli-plugin-router": "~4.3.0",
    "@vue/cli-plugin-typescript": "~4.3.0",
    "@vue/cli-plugin-vuex": "~4.3.0",
    "@vue/cli-service": "~4.3.0",
    "@vue/compiler-sfc": "^3.0.0-beta.1",
    "@vue/eslint-config-typescript": "^5.0.2",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-alpha.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.2",
    "typescript": "~3.8.3",
    "vue-cli-plugin-vue-next": "~0.1.2"
  }
}

2、使用文档

1. 项目入口main.ts

import { createApp } from 'vue';
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

3、语法相关

1. 响应式变量声明

import {
    ref, reactive } from 'vue'
// 方式一： 可传入任意类型的值，改变值的时候必须使用其value属性,例 refData.value = 2
const refData