Vue3创建项目

已无测试机

已于 2022-01-21 11:32:10 修改

阅读量1k

点赞数

文章标签： vue.js npm javascript

于 2022-01-13 15:37:00 首次发布

本文链接：https://blog.csdn.net/DDJ_TEST/article/details/122436622

版权

Vue3创建项目

Vue.js安装

1、安装Nodejs
2、验证

node -v
v16.13.2

npm -v
8.1.2

3、全局安装vue3、vue cli
https://v3.cn.vuejs.org/guide/installation.html#npm
https://cli.vuejs.org/zh/guide/installation.html

npm install vue@next
npm install -D @vue/compiler-sfc
npm install -g @vue/cli
npm install -g @vue/cli-init

4、验证

vue --version

创建vue项目

新版
在这里插入图片描述
旧版

使用新版安装
1、在一个空白文件夹，右键打开“Windows PowerShell”
2、输入 vue create automated-test-platform-vue2 创建项目

PS E:\dome> vue create automated-test-platform-vue2

3、选择Manually select features（手动选择功能）

Vue CLI v4.5.15
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
> Manually select features

4、选择Choose Vue version、Babel、Router、Vuex、CSS Pre-processors、 Linter / Formatter

Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
>(*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

5、选择Vue3版本

Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with
  2.x
> 3.x

6、输入：Y

Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y

7、选择Sass/SCSS (with dart-sass)

Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
node-sass是自动编译实时的，dart-sass需要保存后才会生效

Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
> Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus

8、选择ESLint + Standard config

仅具有错误预防功能的ESLint
ESLint + Airbnb配置
ESLint +标准配置
ESLint +漂亮

Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
> ESLint + Standard config
  ESLint + Prettier

9、选择Lint on save、Lint and fix on commit

Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features:
 (*) Lint on save
>(*) Lint and fix on commit

10、选择In dedicated config files

Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

11、将此保存为未来项目的预设？输入：N

Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) N

12、创建完成项目

PS E:\dome> vue create automated-test-platform-vue2

Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No


Vue CLI v4.5.15
✨  Creating project in E:\dome\automated-test-platform-vue2.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...


added 1277 packages in 2m

11 packages are looking for funding
  run `npm fund` for details
🚀  Invoking generators...
📦  Installing additional dependencies...


added 214 packages in 16s

13 packages are looking for funding
  run `npm fund` for details
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project automated-test-platform-vue2.
👉  Get started with the following commands:

3、启动项目

 $ cd automated-test-platform-vue2
 $ npm run serve
> automated-test-platform-vue2@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 5782ms                                                                                                                       下午2:59:39


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

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

4、访问http://localhost:8080
在这里插入图片描述

遇到问题1

PS E:\dome> vue create automated-test-platform-vue2                                                                     

Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No


Vue CLI v4.5.15
✨  Creating project in E:\dome\automated-test-platform-vue2.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...


added 1277 packages in 2m

11 packages are looking for funding
  run `npm fund` for details
🚀  Invoking generators...
📦  Installing additional dependencies...

npm ERR! code 1
npm ERR! path E:\dome\automated-test-platform-vue2\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node-gyp rebuild
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Command failed: D:\Python37\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack   File "<string>", line 1
npm ERR! gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack                                ^
npm ERR! gyp ERR! stack SyntaxError: invalid syntax
npm ERR! gyp ERR! stack
npm ERR! gyp ERR! stack     at ChildProcess.exithandler (node:child_process:397:12)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:390:28)
npm ERR! gyp ERR! stack     at maybeClose (node:internal/child_process:1064:16)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)
npm ERR! gyp ERR! System Windows_NT 10.0.18363
npm ERR! gyp ERR! command "D:\\node-v16.13.2-win-x64\\node.exe" "E:\\dome\\automated-test-platform-vue2\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
npm ERR! gyp ERR! cwd E:\dome\automated-test-platform-vue2\node_modules\node-sass
npm ERR! gyp ERR! node -v v16.13.2
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\shenyf\AppData\Local\npm-cache\_logs\2022-01-13T06_14_24_097Z-debug.log
 ERROR  command failed: npm install --loglevel error --legacy-peer-deps

解决办法：

PS E:\dome> npm install -g node-gyp                                                                                     
added 90 packages, and audited 91 packages in 2m

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

found 0 vulnerabilities

找到本机安装的python版本

PS E:\dome> npm config set python python3.73                                                                                            PS E:\dome> node-gyp list
gyp info it worked if it ends with ok
gyp info using node-gyp@8.4.1
gyp info using node@16.13.2 | win32 | x64
16.13.2
gyp info ok

遇到问题2

PS E:\dome> node-gyp list                                                                                                               gyp info it worked if it ends with ok
gyp info using node-gyp@8.4.1
gyp info using node@16.13.2 | win32 | x64
No node development files installed. Use `node-gyp install` to install a version.
gyp info ok

解决办法：

PS E:\dome> node-gyp install
gyp info it worked if it ends with ok
gyp info using node-gyp@8.4.1
gyp info using node@16.13.2 | win32 | x64
gyp http GET https://nodejs.org/download/release/v16.13.2/node-v16.13.2-headers.tar.gz
gyp http 200 https://nodejs.org/download/release/v16.13.2/node-v16.13.2-headers.tar.gz
gyp http GET https://nodejs.org/download/release/v16.13.2/SHASUMS256.txt
gyp http GET https://nodejs.org/download/release/v16.13.2/win-x86/node.lib
gyp http GET https://nodejs.org/download/release/v16.13.2/win-x64/node.lib
gyp http GET https://nodejs.org/download/release/v16.13.2/win-arm64/node.lib
gyp http 200 https://nodejs.org/download/release/v16.13.2/SHASUMS256.txt
gyp http 404 https://nodejs.org/download/release/v16.13.2/win-arm64/node.lib
gyp http 200 https://nodejs.org/download/release/v16.13.2/win-x86/node.lib
gyp http 200 https://nodejs.org/download/release/v16.13.2/win-x64/node.lib
undefined
gyp info ok
PS E:\dome>

已无测试机

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue3创建项目

自动化测试平台开发Vue.js安装1、安装Nodejs2、验证node -vnpm -v3、全局安装vue clihttps://cn.vuejs.org/v2/guide/installation.htmlhttps://cli.vuejs.org/zh/guide/installation.htmlnpm install -g @vue/cli4、验证vue --version创建vue项目1、在一个空白文件夹，右键打开“Windows PowerShell”2、输入
复制链接

扫一扫