首页 > 其他分享 >vuejs从入门到精通——Visual Studio Code 使用 vite 安装项目

vuejs从入门到精通——Visual Studio Code 使用 vite 安装项目

时间:2023-02-03 20:12:08浏览次数:34  
标签:npm ... Code vuejs worker project Visual vue begin01

Visual Studio Code 使用 vite 安装项目

Vite 是一个轻量级的、速度极快的构建工具,对 Vue SFC 提供第一优先级支持。作者是尤雨溪,同时也是 Vue 的作者。

要使用 vite 来创建一个 vue 项目,非常的简单:

安装前需要有 node 环境,我本地已经安装过了,同时之前篇章里有讲过如何安装 node,这里不再赘述。

PS D:\worker-vue\vue-begin01> npm -v
9.3.1
PS D:\worker-vue\vue-begin01> node -v
v18.13.0
PS D:\worker-vue\vue-begin01> npm init vue@latest

Vue.js - The Progressive JavaScript Framework

√ Project name: ... vue-project
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes
√ Add Prettier for code formatting? ... No / Yes

Scaffolding project in D:\worker-vue\vue-begin01\vue-project...

Done. Now run:

  cd vue-project
  npm install   
  npm run lint  
  npm run dev   

PS D:\worker-vue\vue-begin01> 

按照提示,继续执行命令:

PS D:\worker-vue\vue-begin01> cd .\vue-project\
PS D:\worker-vue\vue-begin01\vue-project> npm install
npm WARN deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead

added 354 packages in 30s
PS D:\worker-vue\vue-begin01\vue-project> npm run lint

> [email protected] lint
> eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore

PS D:\worker-vue\vue-begin01\vue-project> npm run dev 

> [email protected] dev
> vite


  VITE v4.1.1  ready in 654 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

按住 ctrl 键,鼠标单击 Local 后面的 http 超链接,跳转到如下界面,表示成功了:

 

 

 

 

  

  

 

 

 

标签:npm,...,Code,vuejs,worker,project,Visual,vue,begin01
From: https://www.cnblogs.com/zuoyang/p/17090338.html

相关文章