1、首先进入你的项目目录,执行以下命令安装vue的环境
npm install -g @vue/cli
当看到结尾为以下内容表示安装完成
changed 945 packages, and audited 946 packages in 34s
68 packages are looking for funding
run `npm fund` for details
13 vulnerabilities (6 moderate, 7 high)
Some issues need review, and may require choosing
a different dependency.
Run `npm audit` for details.
2、创建vue项目
2.1 搭建脚手架
使用以下命令搭建脚手架,project-name 是你的项目名称,按需修改
vue create project-name
2.2 选择创建项目模式
这里选择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
2.3 选择需要的功能
按需选择,按↑
、↓
上下选择,按空格键
选中,确定无误后按回车
键进入下一步
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
2.4 选择vue的版本
这里选择3.x
版本,按回车
键进入下一步
Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, TS, Router, Vuex, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with
2.x
> 3.x
2.5 确认选择
这里会列出你刚刚的选择项,确认无误后输入 y
, 然后按回车
键进入下一步
Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, TS, Router, Vuex, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? (y/N)
2.6 是否使用babel编译JSX
输入 y
, 然后按回车
键进入下一步
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (y/N)
2.7 是否用history模式来创建路由
输入 y
, 然后按回车
键进入下一步
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
2.8 选择一个CSS预处理器
这里选选择Less
, 然后按回车
键进入下一步
? 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
2.9 你更喜欢把Babel、ESLint等的配置放在哪里
选择In package.json
, 然后按回车
键进入下一步
? Where do you prefer placing config for Babel, ESLint, etc.?
In dedicated config files
> In package.json
2.10 是否保存为 future 项目
输入 y
, 然后按回车
键进入下一步
Save this as a preset for future projects? (y/N)
2.11 预设另存为
这边不填写任何值,直接按回车
键,此时会自动创建项目,需要等待大约十几秒
? Save preset as:
2.12 项目创建完成
当控制台显示以下信息时表示项目创建成功
added 36 packages in 4s
⚓ Running completion hooks...
� Generating README.md...
� Successfully created project project-name.
� Get started with the following commands:
$ cd project-name
$ npm run serve
2.13 启动项目
执行完成后会在当前目录生成一个名为 project-name
的文件夹,这个文件夹就是创建的vue项目,此时进入目录并启动项目
# 进入项目
cd project-name
# 启动项目
npm run serve
当控制台展示以下信息表示项目启动完成
DONE Compiled successfully in 2713ms 上午11:57:46
App running at:
- Local: http://localhost:8081/
- Network: http://192.168.255.10:8081/
Note that the development build is not optimized.
To create a production build, run npm run build.
No issues found.
此时就可以通过 链接:http://localhost:8081/
来访问项目了