前提条件

  • 已安装NodeJs
  • 建议安装pnpm

安装框架

pn install vue@latest

安装效果

PS D:\DATA\git\gitee\vue\StepVue> pn install vue@latest
 WARN  deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
Packages: +25
+++++++++++++++++++++++++
Packages are hard linked from the content-addressable store to the virtual store.
  Content-addressable store is at: D:\.pnpm-store\v3
  Virtual store is at:             node_modules/.pnpm
Progress: resolved 25, reused 13, downloaded 12, added 25, done

dependencies:
+ vue 3.2.47

Done in 13.6s
PS D:\DATA\git\gitee\vue\StepVue>

创建应用

语法

npm init vue@latest  <项目名>

演示

npm init vue@latest

效果

liumou@liumou-PC:~/git/coding/001/GoPrint$ npm init vue@latest
Need to install the following packages:
  create-vue@3.6.1
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework

✔ Project name: … www
✔ 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

Scaffolding project in /home/liumou/git/coding/001/GoPrint/www...

Done. Now run:

  cd www
  npm install
  npm run dev

然后根据提示依次执行

根据前面的内容，这里的npm改为pn

VUE3入门第二篇：安装pnpm

cd .\step\
pn install
pn run dev

效果如下


PS D:\DATA\git\gitee\vue\StepVue> cd .\step\
PS D:\DATA\git\gitee\vue\StepVue\step> pn install
 WARN  deprecated rollup-plugin-terser@7.0.2: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser
 WARN  deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
Packages: +300
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Packages are hard linked from the content-addressable store to the virtual store.
  Content-addressable store is at: D:\.pnpm-store\v3
  Virtual store is at:             node_modules/.pnpm
Progress: resolved 301, reused 300, downloaded 0, added 300, done

dependencies:
+ vue 3.0.4 (3.2.47 is available)

devDependencies:
+ @vue/compiler-sfc 3.0.4 (3.2.47 is available)
+ vite 1.0.0-rc.13 (4.1.4 is available)

Done in 15.1s
PS D:\DATA\git\gitee\vue\StepVue\step> pn run dev

> step@0.0.0 dev D:\DATA\git\gitee\vue\StepVue\step
> vite

[vite] Optimizable dependencies detected:
vue

  Dev server running at:
  > Network:  http://10.1.1.18:3000/
  > Local:    http://localhost:3000/
  > Network:  http://172.22.208.1:3000/

访问

在这里插入图片描述
到这里，应用创建就完成了