使用脚手架(Vue-Cli)创建Vue项目

安装node.js

在安装之前首先我们来了解一下什么是node.js？

node.js是一个基于Chrome V8引擎的JavaScript运行环境，使用了一个事件驱动、非阻塞式I/O模型，让JavaScript 运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。

Node.js对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好，V8引擎执行Javascript的速度非常快，性能非常好，基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。

下载node.js

我们可以从node.js官方获取安装包，选择LTS(长期维护版)，单击左边按钮即可下载node.js的长期维护版。

安装node.js

找到刚刚下载的安装包，直接双击运行就行了，基本没啥配置，可以一路“next”。

查看node.js

当node.js安装完成后我们就可以使用命令查看了：

node -v //查看node版本
npm -V //查看npm版本 由于我们等会要使用npm这个包管理器去安装Vue Cli，所以在这里也要看一看按照好了没
node -v //查看node版本
npm -V //查看npm版本 由于我们等会要使用npm这个包管理器去安装Vue Cli，所以在这里也要看一看按照好了没
node -v //查看node版本
npm -V //查看npm版本 由于我们等会要使用npm这个包管理器去安装Vue Cli，所以在这里也要看一看按照好了没

使用上面两个命令看到以下信息就说明node.js安装成功了

C:\Users\username>node -v
v17.0.0
C:\Users\username>npm -v
8.1.0
C:\Users\username>node -v
v17.0.0

C:\Users\username>npm -v
8.1.0
C:\Users\username>node -v
v17.0.0

C:\Users\username>npm -v
8.1.0

安装脚手架(Vue-cli)

npm安装方式

打开cmd使用npm安装脚手架：

npm config set registry https://registry.npm.taobao.org #切换淘宝镜像
npm install -g @vue/cli #使用npm全局安装脚手架
npm config set registry https://registry.npm.taobao.org #切换淘宝镜像
npm install -g @vue/cli #使用npm全局安装脚手架
npm config set registry https://registry.npm.taobao.org #切换淘宝镜像
npm install -g @vue/cli #使用npm全局安装脚手架

yarn安装方式

打开cmd使用yarn安装脚手架：

npm install -g yarn #全局安装yarn包管理工具
yarn config set registry https://registry.npm.taobao.org #切换淘宝镜像
yarn global add @vue/cli #使用yarn全局安装脚手架
npm install -g yarn #全局安装yarn包管理工具
yarn config set registry https://registry.npm.taobao.org #切换淘宝镜像
yarn global add @vue/cli #使用yarn全局安装脚手架
npm install -g yarn #全局安装yarn包管理工具
yarn config set registry https://registry.npm.taobao.org #切换淘宝镜像
yarn global add @vue/cli #使用yarn全局安装脚手架

以上两种安装方式二选一使用即可，推荐使用yarn方式安装，yarn和npm相比下载速度更快、更稳定。

查看脚手架版本

安装好了之后我们就可以查看到脚手架（Vue-Cli）的版本了，通过以下命令查看版本：

vue -V #查看脚手架版本
vue -V #查看脚手架版本
vue -V #查看脚手架版本

当出现类似于“@vue/cli 5.0.8”的信息就说明脚手架安装成功了。

脚手架创建Vue项目

先创建一个存放Vue-Cli项目的文件夹，然后打开cmd执行以下步骤：

创建项目

使用以下命令创建项目:

vue create 项目名称
vue create 项目名称
vue create 项目名称

当执行以上命令就可以根据引导一步一步创建项目：

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
  Default ([Vue 3] babel, eslint) #按照默认配置创建Vue3项目
  Default ([Vue 2] babel, eslint) #按照默认配置创建Vue2项目
> Manually select features #手动选择配置创建Vue项目
# 这里主要讲“Manually select features”这个选项进行创建，因为上面两个选项都是选完就可以自动创建完成了。
Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
  Default ([Vue 3] babel, eslint) #按照默认配置创建Vue3项目
  Default ([Vue 2] babel, eslint) #按照默认配置创建Vue2项目
> Manually select features #手动选择配置创建Vue项目

# 这里主要讲“Manually select features”这个选项进行创建，因为上面两个选项都是选完就可以自动创建完成了。
Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
  Default ([Vue 3] babel, eslint) #按照默认配置创建Vue3项目
  Default ([Vue 2] babel, eslint) #按照默认配置创建Vue2项目
> Manually select features #手动选择配置创建Vue项目

# 这里主要讲“Manually select features”这个选项进行创建，因为上面两个选项都是选完就可以自动创建完成了。

使用上下方向键进行选项选择“Manually select features”，使用“Enter”确定选项。

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing
# 在这里根据自己的需要选择安装，使用空格键选中
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

# 在这里根据自己的需要选择安装，使用空格键选中
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

# 在这里根据自己的需要选择安装，使用空格键选中

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 3.x
  2.x
# 在这里选择需要的Vue版本
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 3.x
  2.x

# 在这里选择需要的Vue版本
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 3.x
  2.x

# 在这里选择需要的Vue版本

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
# 这里是询问路由的模式，输入y也就是history模式，只有选中Router才有这个询问
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

# 这里是询问路由的模式，输入y也就是history模式，只有选中Router才有这个询问
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

# 这里是询问路由的模式，输入y也就是history模式，只有选中Router才有这个询问

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
# 在这里选择代码检查和格式化工具
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

# 在这里选择代码检查和格式化工具
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

# 在这里选择代码检查和格式化工具

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to
proceed)
>(*) Lint on save #保存代码时检查
 ( ) Lint and fix on commit #提交时进行代码检查和修复
# 这里是选择项目代码检查方式，默认是在保存项目时检查代码
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to
proceed)
>(*) Lint on save #保存代码时检查
 ( ) Lint and fix on commit #提交时进行代码检查和修复

# 这里是选择项目代码检查方式，默认是在保存项目时检查代码
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to
proceed)
>(*) Lint on save #保存代码时检查
 ( ) Lint and fix on commit #提交时进行代码检查和修复

# 这里是选择项目代码检查方式，默认是在保存项目时检查代码

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json
# 这里选择配置文件存放地方，默认是专用配置文件，也可以选择存放在package.json文件中
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

# 这里选择配置文件存放地方，默认是专用配置文件，也可以选择存放在package.json文件中
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

# 这里选择配置文件存放地方，默认是专用配置文件，也可以选择存放在package.json文件中

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)
# 这里时询问是否保存这个项目配置，为了方便可以保存，下次创建项目的时候就可以选择这次保存的配置，就很方便了
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)

# 这里时询问是否保存这个项目配置，为了方便可以保存，下次创建项目的时候就可以选择这次保存的配置，就很方便了
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)

# 这里时询问是否保存这个项目配置，为了方便可以保存，下次创建项目的时候就可以选择这次保存的配置，就很方便了

回车之后就开始创建项目了。

Vue CLI v5.0.8
✨  Creating project in E:\demo\demo.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...
yarn install v1.22.19
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
success Saved lockfile.
Done in 31.89s.
🚀  Invoking generators...
📦  Installing additional dependencies...
yarn install v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 7.34s.
⚓  Running completion hooks...
📄  Generating README.md...
🎉  Successfully created project demo.
👉  Get started with the following commands:
 $ cd demo
 $ yarn serve
# 这样一个Vue项目就创建完成了，由于我使用的时yarn这个包管理器，所以这里运行服务就是yarn serve
Vue CLI v5.0.8
✨  Creating project in E:\demo\demo.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

yarn install v1.22.19
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...

success Saved lockfile.
Done in 31.89s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Saved lockfile.
Done in 7.34s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project demo.
👉  Get started with the following commands:

 $ cd demo
 $ yarn serve

# 这样一个Vue项目就创建完成了，由于我使用的时yarn这个包管理器，所以这里运行服务就是yarn serve
Vue CLI v5.0.8
✨  Creating project in E:\demo\demo.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

yarn install v1.22.19
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...

success Saved lockfile.
Done in 31.89s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Saved lockfile.
Done in 7.34s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project demo.
👉  Get started with the following commands:

 $ cd demo
 $ yarn serve

# 这样一个Vue项目就创建完成了，由于我使用的时yarn这个包管理器，所以这里运行服务就是yarn serve

运行项目

使用刚刚的cmd窗口，使用cd切换到项目目录，执行“npm run serve”就可以运行项目了，浏览器访问对应的地址就可以浏览项目了。(通常是http://localhost:8080/或类似的地址)

检查项目

在项目目录打开cmd使用“npm run lint”检查项目。

打包项目

在项目目录打开cmd使用“npm run build”进行打包项目，打包完成后会在项目根目录生成一个“dist”目录，这里面就是已经打包好了的项目了，直接放到web服务器网站目录就可以使用了。