前端框架Vue3.0

最新推荐文章于 2024-05-28 10:01:58 发布

Acloasia

最新推荐文章于 2024-05-28 10:01:58 发布

阅读量3.2k

点赞数

分类专栏： Vue 文章标签：前端框架 javascript 前端

本文链接：https://blog.csdn.net/Acloasia/article/details/131564030

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、创建Vue3.0工程

1.使用 vue-cli 创建

1.1. 检查@vue/cli的版本，确认是否@vue/cli版本在4.5.0以上

一、创建Vue3.0工程

1.使用 vue-cli 创建

1.1. 检查@vue/cli的版本，确认是否@vue/cli版本在4.5.0以上

代码：
vue --version
vue -V
实例：
C:\Users\Administrator\Desktop\Vue>vue -V
@vue/cli 5.0.8

1.2. 安装或者升级@vue/cli

代码：

npm install -g @vue/cli

实例：

C:\Users\Administrator\Desktop\Vue>npm install -g @vue/cli
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated apollo-datasource@3.3.2: The `apollo-datasource` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated apollo-server-errors@3.3.1: The `apollo-server-errors` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated apollo-server-plugin-base@3.7.2: The `apollo-server-plugin-base` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated apollo-server-types@3.8.0: The `apollo-server-types` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated apollo-server-express@3.12.0: The `apollo-server-express` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated apollo-reporting-protobuf@3.4.0: The `apollo-reporting-protobuf` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). This package's functionality is now found in the `@apollo/usage-reporting-protobuf` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated apollo-server-env@4.2.1: The `apollo-server-env` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). This package's functionality is now found in the `@apollo/utils.fetcher` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated subscriptions-transport-ws@0.11.0: The `subscriptions-transport-ws` package is no longer maintained. We recommend you use `graphql-ws` instead. For help migrating Apollo software to `graphql-ws`, see https://www.apollographql.com/docs/apollo-server/data/subscriptions/#switching-from-subscriptions-transport-ws    For general help using `graphql-ws`, see https://github.com/enisdenjo/graphql-ws/blob/master/README.md
npm WARN deprecated apollo-server-core@3.12.0: The `apollo-server-core` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.

added 1 package, removed 7 packages, and changed 861 packages in 2m

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

1.3 创建工程

vue create 【项目名称】

代码：

vue create vue_project

实例：

C:\Users\Administrator\Desktop\Vue>vue create vue_preject


Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 3] babel, eslint)


Vue CLI v5.0.8
✨  Creating project in C:\Users\Administrator\Desktop\Vue\vue_preject.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...


added 857 packages in 19s
🚀  Invoking generators...
📦  Installing additional dependencies...


added 92 packages in 4s
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project vue_preject.
👉  Get started with the following commands:

 $ cd vue_preject
 $ npm run serve

 WARN  Skipped git commit due to missing username and email in git config, or failed to sign commit.
       You will need to perform the initial commit yourself.

1.4 启动Vue工程

先切换到Vue工程的路径，然后再去启动工程

代码：

npm run serve

实例：

C:\Users\Administrator\Desktop\Vue\vue_preject>npm run serve

> vue_preject@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...


 DONE  Compiled successfully in 4873ms                                                                          21:21:43

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://172.54.70.192:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

2. 使用 vite 创建

vite官网：Vite中文网

vite官方中文文档：Vite | 下一代的前端工具链

什么是vite？—— 新一代前端构建工具。
优势如下：
- 开发环境中，无需打包操作，可快速的冷启动。
- 轻量快速的热重载（HMR）。
- 真正的按需编译，不再等待整个应用编译完成

代码：

## 创建工程
npm init vite-app <project-name>
## 进入工程目录
cd <project-name>
## 安装依赖
npm install
## 运行
npm run dev

实例：


C:\Users\Administrator\Desktop\Vue>npm init vite-app vue_vite_project
Scaffolding project in C:\Users\Administrator\Desktop\Vue\vue_vite_project...

Done. Now run:

  cd vue_vite_project
  npm install (or `yarn`)
  npm run dev (or `yarn dev`)


C:\Users\Administrator\Desktop\Vue>cd vue_vite_project

C:\Users\Administrator\Desktop\Vue\vue_vite_project>npm install
npm WARN deprecated rollup-plugin-terser@7.0.2: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser
npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead

added 299 packages, and audited 300 packages in 4s

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

3 vulnerabilities (2 low, 1 high)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

C:\Users\Administrator\Desktop\Vue\vue_vite_project>npm run dev

> vue_vite_project@0.0.0 dev
> vite

[vite] Optimizable dependencies detected:
vue

  Dev server running at:
  > Network:  http://192.168.121.1:3000/
  > Network:  http://192.168.27.1:3000/
  > Network:  http://172.16.70.190:3000/
  > Local:    http://localhost:3000/