vue-cli 3.0x以上版本脚手架搭建流程说明

作者：一只小泰迪

说明：vue-cli 3.x 版本以上脚手架搭建

日期：2020-04-15

一、安装前提

1.Node.js,npm,cnpm,vue,vue-cli,Vue Devtools,webpack相互关系说明

• node.js:是基于Chrome V8 引擎的

  JavaScript

  运行时环境。
• npm:(全称：

  node package manager

  )：

  node.js

  的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）。可以看成

  java

  项目中使用

  maven

  管理依赖，下载

  jar

  包的功能
• cnpm:因为

  npm

  安装插件是从国外服务器下载，受网络的影响比较大，可能会出现异常，如果

  npm

  的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这个事情，来自官网“这是一个完整npmjs.org镜像，你可以用此代替官方版本（只读），同步频率目前为10分钟，一次保证尽量与官方服务同步。”（亲自尝试：比

  npm

  快许多)
• vue:是一套用于构建用户界面的渐进式框架
• vue-cli:是用于快速

  vue.js

  开发的完整系统，是

  vue.js

  开发的官方脚手架。包含了1.零配置快速原型；2.提供了运行时依赖；3.提供了更夫的官方插件库；4完整的图形用户界面。
• vue-devtools:是基于

  Chrome

  浏览器的插件，用于

  vue

  应用的调试，这款

  vue

  调试神器可以极大的提高我们的调试效率。帮助我们快速的调试开发

  vue

  应用
• webpack：是一个依赖于

  Node.js

  环境运行的，现代

  JavaScript

  应用程序的静态模块打包（module bundler)。

  webpack

  对于前端模块开发的各个模块相互之间的依赖进行解析，递归构建依赖关系，最终打包成一个或少量的可被浏览器识别的静态文件。可以看成maven的打包编译，解析依赖功能。

因此，一个vue项目，想要被最终的浏览器访问，首先得有一个Node.js环境，支持模块化开发；其次需要npm帮忙拉取一些包来复用，组装；最后编译完成，需要webpack依赖于Node环境将整个vue项目打包编译，递归依赖，生成浏览器识别的文件。然后被浏览器访问到。

vue.js开发使用vue-cli脚手架会方便很多，而vue-cli是全局安装的npm软件包，并且npm能很好的和vue的webpack模块打包器配合使用。

2.安装地址以及详情步骤

• node.js

  :下载地址：https://nodejs.org/zh-cn/

• node.js

  :安装详情步骤地址（推荐）:https://www.cnblogs.com/lgx5/p/10732016.html

  安装完成后可查看，查看步骤：

  （1）.（Windows键 （键盘上的四个小方块）+ R键）之后，输入

  cmd

​

（2）.输入`node -v`之后、回车，查看`node`版本

（3）.输入`npm -v`之后、回车，查看`npm`版本

![](http://ltdev.uxunsoft.com:4999/server/../Public/Uploads/2020-05-07/5eb35740863d9.png)

• cnpm

  的安装方法 :在命令行中输入

  npm install -g cnpm --registry=https://registry.npm.taobao.org

  后、回车。如图：

安装完成后，查看安装版本

cnpm -v

后回车,如图：

• webpack

  的安装：在命令行输入

  npm install webpack-cli -g

  后回车，如图：

安装完成后，查看版本，如图：

至此，安装前提工作准备完成。

二、安装vue-cli脚手架

• 安装

  vue-cli

  1.x或2.x版本

  npm install -g vue-cli

  (低版本的可忽略，重点是3.0以上版本)
• 安装

  vue-cli

  3.x 以上 版本需要卸载

  vue-cli

  (1.x或2.x)，卸载代码

  npm uninstall vue-cli -g

• 安装

  vue-cli

  3.x以上版本,在命令行输入

  npm install -g @vue/cli

  后回车。如图：

安装完成后，输入`vue -V`,注意是大写的**V**，回车，查看安装版本：

出现如图：脚手架安装完成。

三、初始化一个项目

介绍两种初始化项目的方法：一种是命令行的方式、一种是vue ui的方式(vue-cli 3.x以上才支持 vue ui 方式)。

1.命令行初始化一个vue项目

从头说起，首先，我们已经全局安装了vue-cli 并且版本为4.2.3，我需要在我的电脑中的F盘初始化一个项目，当然这不是限制死的。项目可以建在各自喜欢的位置。

第一步：打开我的电脑，选择F 盘，新建文件夹

myvue

,并且点击进入该文件夹。

第二步：键盘shift键+鼠标右键，再点击红色框标注的PowerShell窗口，之后如下图。

第三步：在命令行中输入创建项目的命令：

vue create myapp

,其中myapp是我的项目名称，回车，根据自己的来定。

第四步： 选择需要安装的配置。可通过用上、下键来进行选择，选择完成后进行回车，我选择的是最后一项，手动进行配置。

**第五步：**手动进行配置

**第六步：**选择路由模式

第七步：选择eslint

**第八步：**是否保存预设，这里我选择了N，当然你可以选择Y，以方便后续初始化一个新项目时直接拿来使用

第九步: 等待许久进行安装，安装完成，

第十步：

cd myapp

回车，

npm run serve

运行，将地址复制进入浏览器，初始化项目完成。在vscode开发工具中打开F盘下的项目文件夹中的项目，就可以看见初始化项目的文件目录了，至此，初始化项目完成。

2.使用vue ui图形化初始化一个项目

第一步：在E盘中新建一个文件夹，名为

myappdemo

（名称随个人喜好，小写），Windows键+R键。输入

cmd

,进入命令行界面，输入

vue ui

,回车，如图：

**第二步：**点击创建，选择提前准备的文件夹。

**第三步：**配置项目名称，点击下一步

**第四步：**选择预设，在此我选择手动，点击下一步

**第五步：**选择自己需要的配置，点击下一步

**第六步：**路由模式以及eslint标准

**第七步：**点击创建项目时，会提示是否将此设为预设，我选择否，因为我的预设的太多了，当然，你可以设为预设，它就像一个模板一样，方便你下次快速初始化项目。

**第八步：**安装完成，启动项目，并且用开发工具打开项目目录结构。

至此，vue ui初始化项目完成。
初次写文章，还望路过大神指点。。。