目录
一、创建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 创建
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
代码:
npm install -g @vue/cli
实例:
C:\Users\Administrator\Desktop\Vue>npm install -g @vue/cli npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated npm WARN deprecated [email protected]: 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 [email protected]: 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 [email protected]: See https://github.com/lydell/source-map-resolve#deprecated npm WARN deprecated [email protected]: 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 [email protected]: 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 [email protected]: https://github.com/lydell/resolve-url#deprecated npm WARN deprecated [email protected]: 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 [email protected]: 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 [email protected]: 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 [email protected]: 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 [email protected]: 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
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.
先切换到Vue工程的路径,然后再去启动工程
代码:
npm run serve
实例:
C:\Users\Administrator\Desktop\Vue\vue_preject>npm run serve > [email protected] 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.
vite官网:Vite中文网
vite官方中文文档:Vite | 下一代的前端工具链
什么是vite?—— 新一代前端构建工具。
优势如下:
开发环境中,无需打包操作,可快速的冷启动。
轻量快速的热重载(HMR)。
真正的按需编译,不再等待整个应用编译完成
代码:
## 创建工程 npm init vite-app
## 进入工程目录 cd ## 安装依赖 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 [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser npm WARN deprecated [email protected]: 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 > [email protected] 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/