vue3使用vite创建项目【2分钟】

命令讲解

【查看版本】
[dalaojun@localhost luichunvue]$ node -v
v14.15.0
[dalaojun@localhost luichunvue]$ npm -v
7.19.1
[dalaojun@localhost luichunvue]$ vue -V
@vue/cli 4.5.13
【升级vue】
cnpm update -g @vue/cli
【显示下面的是表示已经弃用，不用理会】
[dalaojun@localhost luichunvue]$ npm update -g @vue/cli
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: this
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/[email protected]: joi is leaving the @hapi organization and moving back to ‘joi’ (https://github.com/sideway/joi/issues/2411)
【表示已经弃用，不用理会】

创建一个文件夹来装载新建的项目vitevue
cd vitevue
【Vue3里面使用vite创建项目】

npm 7+，需要额外的双破折号：其他版本的去官网看看
npm init @vitejs/app my-vue-app – --template vue

vite官网
https://vitejs.dev/guide/#scaffolding-your-first-vite-project

支持的模板预设包括：vanilla vanilla-ts vue vue-ts react react-ts preact preact-ts lit-element lit-element-ts svelte svelte-ts
【进入创建的目录】
cd my-vue-app
【执行安装所需的包----也可以执行cnpm install】
npm install
【启动开发项目–也可以执行cnpm run dev】
npm run dev

操作顺序

【下面的代码为终端的执行过程】

[dalaojun@localhost vitevue]$ node -v
v14.15.0
[dalaojun@localhost vitevue]$ npm -v
7.19.1
[dalaojun@localhost vitevue]$ vue -V
@vue/cli 4.5.13
[dalaojun@localhost vitevue]$ npm init @vitejs/app my-vue-app -- --template vue

  cd my-vue-app
  npm install
  npm run dev


[dalaojun@localhost vitevue]$ cd my-vue-app
[dalaojun@localhost my-vue-app]$ cnpm install
⠴ [3/4] Installing fsevents@~2.3.2platform unsupported vite@2.4.1 › fsevents@~2.3.2 Package require os(darwin) not compatible with your platform(linux)
[fsevents@~2.3.2] optional install error: Package require os(darwin) not compatible with your platform(linux)
✔ Installed 4 packages
✔ Linked 58 latest versions
[1/1] scripts.postinstall vite@2.4.1 › esbuild@^0.12.8 run "node install.js", root: "/home/dalaojun/桌面/django_luichun/vitevue/my-vue-app/node_modules/[email protected]@esbuild"
[1/1] scripts.postinstall vite@2.4.1 › esbuild@^0.12.8 finished in 137ms
✔ Run 1 scripts
Recently updated (since 2021-07-03): 3 packages (detail see file /home/dalaojun/桌面/django_luichun/vitevue/my-vue-app/node_modules/.recently_updates.txt)
✔ All packages installed (58 packages installed from npm registry, used 2s(network 1s), speed 216.6KB/s, json 58(315.15KB), tarball 0B)
[dalaojun@localhost my-vue-app]$ cnpm run dev

> @0.0.0 dev /home/dalaojun/桌面/django_luichun/vitevue/my-vue-app
> vite

Pre-bundling dependencies:
  vue
(this will be run only when your dependencies or config have changed)

  vite v2.4.1 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 726ms.

[@vue/compiler-sfc] <script setup> is still an experimental proposal.仍然是一个实验性的建议。跟踪其状态
Follow its status at https://github.com/vuejs/rfcs/pull/227.

[@vue/compiler-sfc] When using experimental features,
it is recommended to pin your vue dependencies to exact versions to avoid breakage.
使用实验功能时，建议将vue依赖项固定到精确的版本以避免中断。

[@vue/compiler-sfc] `defineProps` is a compiler macro and no longer needs to be imported.
`defineProps`是编译器宏，不再需要导入。