目录
一、创建Vue3.0工程
1.使用 vue-cli 创建
1.1. 检查@vue/cli的版本，确认是否@vue/cli版本在4.5.0以上
1.2. 安装或者升级@vue/cli
1.3 创建工程
1.4 启动Vue工程
2. 使用 vite 创建
一、创建Vue3.0工程
1.使用 vue-cli 创建
1.1. 检查@vue/cli的版本，确认是否@vue/cli版本在4.5.0以上
代码：
vue --versionvue -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实例：文章来源：https://www.toymoban.com/news/detail-543868.html
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/
文章来源地址https://www.toymoban.com/news/detail-543868.html
到了这里，关于前端框架Vue3.0的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
