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
相关命令(新版)
npm install -g @vue/cli
#创建项目
vue create hello-world
vue ui
#安装插件
vue add eslint
#添加vuetify ui组件
vue add vuetify
#启动服务
npm install -g @vue/cli-service-global
vue serve
#构建打包
vue build
遇到问题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>