利用脚手架创建vue项目step by step

一、环境准备

前端开发必需的两个工具

1.node

node.js 官网地址，可以借助 nvs 安装

命令窗口输入node -v 查看版本号

2.npm

• npm 官网地址

命令窗口输入npm -v 查看版本号

3.淘宝镜像

• 淘宝镜像 官网地址
  npm是外网工具，因此对于很多不能的用户来说，下载依赖可能会比较慢，淘宝镜像是国内公司复刻npm的镜像，方便用户快速下载依赖。

打开命令窗口安装:
npm install -g cnpm --registry=https://registry.npm.taobao.org

二、创建项目

1.创建指令

• vue.js 官网地址  vue官网有非常详细的使用教程

cnpm i vue-cli -g                        #官方脚手架，稍等安装完毕再执行下面。
vue init webpack project-name  #project-name是创建的项目名称。

cd到项目project-name目录下进入

cnpm i  #安装项目的所有依赖
cnpm run dev  #启动项目。
在浏览器中输入：http://localhost:8080/ 就可以看到项目效果了。

2.项目目录

build：打包压缩文件，项目上传用。
config：配置文件。
node_modules：项目依赖文件。
src：项目开发主要文件。
test：测试用的文件。

三、脚手架的安装

如果我们安装的是脚手架 3.x 及以上版本，那么我们也可以使用 3.x 的脚手架通过 2.x 的方式来创建项目，但是如果安装的是 2.x 版本的脚手架是不能通过 3.x 的方式创建项目的。

1.安装3.x及以上版本的脚手架

npm install @vue/cli -g

2.安装 2.x 版本的脚手架

npm install vue-cli -g

3.查看脚手架的版本

vue -V

3.x版本以上脚手架创建项目

通过脚手架 3.x 版本 创建项目有两种方式，一种是在命令框中创建项目，一种是在图形化界面创建项目

命令框创建项目，输入创建命令

vue create project-name

3.x 版本基于2.x的旧模板创建项目

如果安装了 3.x 版本，那么就不能使用 vue-cli2.x 版本。因为 3.x 和旧版使用了相同的vue命令，所以 2.x 被覆盖了，所以就不能使用2.x版本中的有些命令。但是如果还然想使用 2.x 的vue init功能，那么此时就需要全局安装一个桥接工具。

npm install -g @vue/cli-init

安装完这个就可以创建项目了，初始化（创建）项目

vue init webpack project-name

两个版本项目目录的对比

通过对比会发现，3.x 少了许多的许多的配置文件的目录（build、config等），因为 3.x 可以在根目录下新建一个vue.config.js文件，所有的配置都会在这个文件里直接配置。vue.config.js是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。

四、项目模板选择

Vue.js官方提供了两种类型的模板项目：

• 基于vue cli和browserify的项目模板
• 基于vue cli和webpack的项目模板

这两种类型的项目模板分别提供了简单模式和完全模式，简单模式仅包含基于vue.js开发必要的一些资源和包，使用该模式可以快速地投入到开发。完全模式则还包括ESLink、单元测试等功能。