Vue开发之vue-cli3.x版本环境搭建

刺骨的言语ヽ痛彻心扉 2023-06-11 13:25 16阅读 0赞

**2019-10-30创建 ：**

**目录**

学习Vue是否需要学会Node.js?

一、Vue开发所需要的环境

1、安装node.js

2、安装npm包管理器

3、替换npm仓库为淘宝源

4、安装构建项目骨架的工具vue-cli

5、使用vue-cli创建vue-app项目：vue create vue-app

二、介绍一些概念

1、vue-cli3.x

2、npm与cnpm的区别

三、环境搭建

一、安装node.js

二、安装npm包管理器

四、将npm远程仓库替换成国内淘宝源

五、安装vue脚手架vue-cli

六、创建项目vue-app(项目名)

七、命令

--------------------

## 学习Vue是否需要学会Node.js? ##

学习Vue不需要学会Node，Vue是前端框架，nodejs是服务端，不需要学会Node.也不需要会Node，我们如果要使用Vue的脚手架的话，只需要学习Node所引声出来的npm指令即可；

## 一、Vue开发所需要的环境 ##

这是基于vue-cli3.x版本的环境搭建教程，跟vue-cli3.x之前的有些不一样

### ** 1、安装node.js** ###

**  **进入Node.js官网：[https://nodejs.org/en/][https_nodejs.org_en]，选择下载并安装Node.js

### ** 2、安装npm包管理器** ###

**   **npm包管理器是集成在Node.js中了，所以在安装Node.js的时候就已经自带了npm，这里不用安装，输入`npm -v`可得到npm的版本

### **3、替换npm仓库为淘宝源** ###

npm远程仓库替换为淘宝的仓库(替换成淘宝源)，这里跟Java中的Maven中央仓库就很像了；

>   **永久设置：** npm config set registry https://registry.npm.taobao.org

### **4、安装构建项目骨架的工具vue-cli** ###

> **  **npm install -g @vue/cli

### **5、使用vue-cli创建vue-app项目：**vue create vue-app ###

>   vue create vue-app

## 二、介绍一些概念 ##

### 1、vue-cli3.x ###

> cli快速原型开发, 生成Vue项目脚手架

### 2、npm与cnpm的区别![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly90aGlua2luZ2Nhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70][] ###

## **三、环境搭建** ##

### **一、安装node.js** ###

对于不是专业的前端或者做后端的程序员来说，可能不是很懂node.js，也不清楚node.js是做什么用的，我也没有使用过，毕竟咱们不是专业的前端开发者对吧；这里说一下关于node.js的一些概念，其实nodejs是一个服务js平台，有npm，grunt、express等强大的代码与项目管理应用。还有webpack，v8等强大的功能，nodejs可以当作服务端语言没错，但是目前使用nodejs最多的场景是前端构建工具，比如webpack，gulp。。而vue的组件要编译势必要借助webpack，所以肯定要提供npm的安装方式，使用npm构建命令，而npm包管理器是集成在Node.js中了；

**1、打开node.js官网[https://nodejs.org/en/][https_nodejs.org_en] ，windows下根据操作系统位数下载，一般是64位**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly90aGlua2luZ2Nhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1][]

**2、直接双击安装即可，跟安装软件一样，这里不再累赘**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly90aGlua2luZ2Nhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 2][]

**3、命令行测试是否安装成功，输入命令：node -v    查看版本**

![20191030204218737.png][]

### **二、安装npm包管理器** ###

** 1、 前面已经说了node.js中已经自带了npm包管理器，这里输入以下命令`npm -g install npm`，更新npm至最新版本**

>   `npm -g install npm`

** 2、  查看npm包管理器版本号： **

>   npm -v

### **四、将npm远程仓库替换成国内淘宝源** ###

**设置成淘宝源：**npm config set registry https://registry.npm.taobao.org/

**获取仓库地址：**npm get registry （验证是否成功）

![20191030204925619.png][]

### 五、安装vue脚手架vue-cli ###

**1、安装vue-cli：**

> npm install -g @vue/cli

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly90aGlua2luZ2Nhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 3][]

**2、测试是否成功，安装成功后可以用 vue -V 查看vue版本，注意是大写的V**

> **vue -V**

![20191030205851391.png][]

### **六、创建项目vue-app(项目名)** ###

> **在创建的过程中，在Windows的命令行工具里使用：上下箭头是切换、空格键是确认选择该项，另外在Git命令行里是无法使用的；**

**1、输入命令：vue create vue-app**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly90aGlua2luZ2Nhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 4][]

这里我们按住向下的箭头，点击空格键选择手动创建模式，初次接触这玩意可以随便折腾，无所谓，我这里选择大多数创建的方式：手动

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly90aGlua2luZ2Nhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 5][]

**2、初次搭建选择这几项即可，点击回车键**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly90aGlua2luZ2Nhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 6][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly90aGlua2luZ2Nhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 7][]

我这里选择是，如果随意搭建，可以选择否，选择是之后，下次创建项目时，会有这个骨架出现，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly90aGlua2luZ2Nhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 8][]

上述步骤完成后，按回车键下一步，这时候就开始创建项目了；完成项目骨架如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly90aGlua2luZ2Nhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 9][]

至此，基于vue-cli3.x的vue项目就搭建成功了

### 七、命令 ###

**1、vue打包编译命令：npm run build**（打包编译后会生成dist文件夹，里面存放静态资源文件，有点类似于Maven编译后生成target目录）

**2、vue运行项目命令：npm run serve，** 然后访问： [http://localhost:8080/\#][http_localhost_8080] ，即可访问vue项目主界面欢迎页

vue-cli3.x与之前版本有些差别，具体可以查看：[Vue入门环境搭建][Vue]

[https_nodejs.org_en]: https://nodejs.org/en/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly90aGlua2luZ2Nhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]: /images/20230531/8ff874fc149a482dacbd590f8dd58c2a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly90aGlua2luZ2Nhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1]: /images/20230531/e775bd3e19774338beaee6867643478e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly90aGlua2luZ2Nhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 2]: /images/20230531/b1634f6e344249ec80e40673835cd442.png
[20191030204218737.png]: /images/20230531/f80549e9baff4432a8b5e3283c8c0731.png
[20191030204925619.png]: /images/20230531/ba4e86298fdb4334bbe1cce662b405c9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly90aGlua2luZ2Nhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 3]: /images/20230531/d28aa1aebd3e4c79b4c72eebe1965d3a.png
[20191030205851391.png]: /images/20230531/c4c47b73584b4525a3d7761251fffb06.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly90aGlua2luZ2Nhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 4]: /images/20230531/3a96f8124b13444ea00379b04c6d92dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly90aGlua2luZ2Nhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 5]: /images/20230531/8aaa5e5a8ef94586a6b738eb5c2dcd72.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly90aGlua2luZ2Nhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 6]: /images/20230531/338f000a079b4cdd8555ac43adcf7f8a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly90aGlua2luZ2Nhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 7]: /images/20230531/28aabffda63f470d904afdd87a14f7b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly90aGlua2luZ2Nhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 8]: /images/20230531/e9c504c0d5f84454bc2b93092f2ac2a2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly90aGlua2luZ2Nhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 9]: /images/20230531/450772c4c65a4157a8578a71686fac42.png
[http_localhost_8080]: http://localhost:8080/#/
[Vue]: https://thinkingcao.blog.csdn.net/article/details/102484516