# hello_vue3 **Repository Path**: loyalty-code/hello_vue3 ## Basic Information - **Project Name**: hello_vue3 - **Description**: No description available - **Primary Language**: TypeScript - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2024-10-02 - **Last Updated**: 2024-10-03 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## VUE3 webpack创建vue2项目： ````shell # 备注：目前vue-cli已处于维护模式，官方推荐基于Vite创建vue3项目。 # vue-cli基于webpack实现，vite基于esbuild实现 npm install -g @vue/cli vue --version vue create hello-vue3 # 选择vue3创建项目 ```` vite创建vue3项目： ```shell npm create vue@latest # vue最新版默认用vite创建项目 https://cn.vuejs.org/ # https://vitejs.dev/ ``` ```shell nvm -v # 1.1.12 node -v # v20.17.0 # 这个是最新的lst版本(vue3)，创建vue2推荐用node=16.x? npm -v # 10.8.2 ``` 进度：https://www.bilibili.com/video/BV1Za4y1r7KE/?p=40&spm_id_from=pageDriver&vd_source=d8a559af09425cf1b2a186b0aa7311ff 040 路由_replace属性 ## dog 随机狗狗图片 https://dog.ceo/api/breed/pembroke/images/random ## 创建vue2项目 ```shell npm install -g @vue/cli vue --version vue create hello-vue2 # 选择vue2创建项目 ``` `vue2用的node版本换一个node环境？` ```shell D:\Desktop\projects-20240905\hello_vue3>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 @babel/plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead. npm warn deprecated @babel/plugin-proposal-nullish-coalescing-operator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead. npm warn deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated npm warn deprecated rimraf@2.6.3: Rimraf versions prior to v4 are no longer supported npm warn deprecated @babel/plugin-proposal-optional-chaining@7.21.0: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead. npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful. npm warn deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated npm warn deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported 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 and October 22nd 2024, respectively). 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 and October 22nd 2024, respectively). 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-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 and October 22nd 2024, respectively). 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 and October 22nd 2024, respectively). 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 shortid@2.2.16: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. 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 and October 22nd 2024, respectively). 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 and October 22nd 2024, respectively). 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 vue@2.7.16: Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details. ^C终止批处理操作吗(Y/N)? y ``` `切换个node版本安装，换了也一样警告的，那这么说和node版本没有关系` `报错是提示要全局安装yarn` ```shell nvm list available nvm install 18.20.4 nvm use 18.20.4 npm install -g @vue/cli vue --version # @vue/cli 5.0.8 vue create hello-vue2 # 选择vue2创建项目 # D:\Desktop\projects-20240905>vue --version # @vue/cli 5.0.8 # D:\Desktop\projects-20240905>vue create hello-vue2 # Vue CLI v5.0.8 # ? Please pick a preset: Default ([Vue 2] babel, eslint) # Vue CLI v5.0.8 # ✨ Creating project in D:\Desktop\projects-20240905\hello-vue2. # 🗃 Initializing git repository... # ⚙️ Installing CLI plugins. This might take a while... # 'yarn' �����ڲ����ⲿ���Ҳ���ǿ����еij��� # �������ļ� # ERROR Error: command failed: yarn # Error: command failed: yarn # at ChildProcess. (D:\NVM\nvm\v18.20.4\node_global\node_modules\@vue\cli\lib\util\executeCommand.js:138:16) # at ChildProcess.emit (node:events:517:28) # at cp.emit (D:\NVM\nvm\v18.20.4\node_global\node_modules\@vue\cli\node_modules\cross-spawn\lib\enoent.js:34:29) # at maybeClose (node:internal/child_process:1098:16) # at ChildProcess._handle.onexit (node:internal/child_process:303:5) ``` `切换Node=16版本` ```shell 创建项目 vue create project 如果报错：vue : 无法加载文件.....\vue.ps1，因为在此系统上禁止运行脚本。 ------以管理员身份运行终端或者 PowerShell ``` `将 node.js 版本降到 v16+` ```shell opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED' ``` powershell 管理员模式下运行： ```shell # C:\WINDOWS\system32>cd "D:\Desktop\projects-20240905" # C:\WINDOWS\system32>cd D:\Desktop\projects-20240905 # C:\WINDOWS\system32>cd D: # D:\Desktop\projects-20240905 # C:\WINDOWS\system32>d: # D:\Desktop\projects-20240905> npm install -g @vue/cli vue --version # @vue/cli 5.0.8 vue create hello-vue2 npm install -g yarn ``` ```shell D:\Desktop\projects-20240905>vue --version @vue/cli 5.0.8 D:\Desktop\projects-20240905>vue create hello-vue2 Vue CLI v5.0.8 ? Please pick a preset: Default ([Vue 2] babel, eslint) Vue CLI v5.0.8 ✨ Creating project in D:\Desktop\projects-20240905\hello-vue2. 🗃 Initializing git repository... ⚙️ Installing CLI plugins. This might take a while... 'yarn' �����ڲ����ⲿ���Ҳ���ǿ����еij��� �������ļ� ERROR Error: command failed: yarn Error: command failed: yarn at ChildProcess. (D:\NVM\nvm\v16.20.2\node_global\node_modules\@vue\cli\lib\util\executeCommand.js:138:16) at ChildProcess.emit (node:events:513:28) at ChildProcess.cp.emit (D:\NVM\nvm\v16.20.2\node_global\node_modules\@vue\cli\node_modules\cross-spawn\lib\enoent.js:34:29) at maybeClose (node:internal/child_process:1100:16) at Process.ChildProcess._handle.onexit (node:internal/child_process:304:5) D:\Desktop\projects-20240905>npm install -g yarn added 1 package in 1s D:\Desktop\projects-20240905>vue create hello-vue2 Vue CLI v5.0.8 ? Target directory D:\Desktop\projects-20240905\hello-vue2 already exists. Pick an action: Overwrite Removing D:\Desktop\projects-20240905\hello-vue2... Vue CLI v5.0.8 ? Please pick a preset: Default ([Vue 2] babel, eslint) Vue CLI v5.0.8 ✨ Creating project in D:\Desktop\projects-20240905\hello-vue2. 🗃 Initializing git repository... ⚙️ Installing CLI plugins. This might take a while... yarn install v1.22.22 info No lockfile found. [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... success Saved lockfile. Done in 49.92s. 🚀 Invoking generators... 📦 Installing additional dependencies... yarn install v1.22.22 [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... [4/4] Building fresh packages... success Saved lockfile. Done in 10.03s. ⚓ Running completion hooks... 📄 Generating README.md... 🎉 Successfully created project hello-vue2. 👉 Get started with the following commands: $ cd hello-vue2 $ yarn serve ```