vue3开发环境: 基本篇

这里介绍怎样安装和配置基本的开发工具和依赖库,这里基本的开发工具包括:

一、安装

  • nodejs: Node.js, 官网下载LTS版本的并安装
  • yarn: node包管理工具
    npm install --global yarn
  • vue3: Vue3.x版本, 参考vue3.0安装文档
    yarn global add @vue/cli@next
  • 用vite创建项目
    yarn create @vitejs/app <project-name> --template vue
  • typescript: Typescript是javascript的超集
    yarn add typescript -D
    npx tsc --init

二、配置文件解释

当项目生成以后,会在项目的根目录下的package.json中看到如下一些开发依赖库:

"devDependencies": {
    "@vitejs/plugin-vue": "^1.2.2",
    "@vue/compiler-sfc": "^3.0.5",
    "typescript": "^4.2.4",
    "vite": "^2.2.3"
  }

@vitejs/plugin-vue提供Vue3单文件组件支持能力,因为vite2.0以后,其作为一个构建工具和框架无关,其通过@vitejs/plugin-vue这个库通过插件的方式提供vue的支持,@vue/compiler-sfc是@vitejs/plugin-vue的一个依赖,项目生成后会生成一个vite.config.js文件如下:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

三、基本配置

  1. 打开main.ts会发现import App from App.vue会报错: Cannot find module './App.vue' or its corresponding type declarations, 这是因为现在ts还没有识别vue文件,需要添加*.vue文件的typescript类型支持,请在项目下新建一个types目录,并新建vue-shims.d.ts文件如下:

    declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
    }
  2. 增加node的基本typescript类型定义

    yarn add @types-node -D
  3. 在创建的tsconfig.json文件中,配置如下:

    "compilerOptions": {
    // this aligns with Vue's browser support
    "target": "esnext",
    // this enables stricter inference for data properties on `this`
    "strict": true,
    // if using webpack 2+ or rollup, to leverage tree shaking:
    "module": "esnext",
    "moduleResolution": "node",
    // include vitejs 类型定义
    "types": ["vite/client"],
    "lib": ["dom", "esnext"]
    },
    "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.vue",
    "types/**/*.d.ts",
    "types/**/*.ts",
    "build/**/*.ts",
    "build/**/*.d.ts",
    "mock/**/*.ts"
    ],
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇