推荐订阅源

******使用vite方式创建应用

E:\vue3学习>npm init vite@latest vite-blog -- --template vue
Need to install the following packages:
create-vite@4.2.0
Ok to proceed? (y) y

Scaffolding project in E:\vue3学习\vite-blog...

Done. Now run:

cd vite-blog
npm install
npm run dev

npm notice
npm notice New minor version of npm available! 9.5.0 -> 9.6.4
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.6.4
npm notice Run npm install -g npm@9.6.4 to update!
npm notice

E:\vue3学习>cd vite-blog

E:\vue3学习\vite-blog>npm install
npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead

added 32 packages, and audited 33 packages in 45s

5 packages are looking for funding
run `npm fund` for details

found 0 vulnerabilities

E:\vue3学习\vite-blog>

创建完成后可以将vite-blog拖拽至vs code进行编辑。

**************使用脚手架创建应用

npm i -g @vue/cli  //安装@vue/cli 脚手架

vue create test  //创建test app

***************vite创建应用

npm install -g create-vite-app  //安装vite

create-vite-appreat vue3-vite //创建vite应用

cd vue3-vite 

npm install

npm run dev

pnpm方式

pnpm create vite 

******************安装typescript 支持

npm  add typescript -D  //安装typescript

PS E:\newsvn\vue3学习\vue3-vite> npx tsc --init  //在vscode终端运行

 shim.d.ts 文件内容

declare module "*.vue" {

    import { Component } from "vue";

    const component:Component

    export default component;

}

**********安装支持sass

PS E:\newsvn\vue3学习\vue3-vite> npm add sass sass-loader -D

安装后检查package.json文件

  "devDependencies": {

    "@vue/compiler-sfc": "^3.0.4",

    "sass": "^1.62.0",  //安装后的提示

    "sass-loader": "^13.2.2", //安装后的提示

    "typescript": "^5.0.4",

    "vite": "^1.0.0-rc.13"

  }