vue环境的搭建安装

目录

1.安装node,下载地址：windows install(.msi) 64-bit

2.安装淘宝镜像（类似于阿里云的maven中央仓库镜像）

3.安装webpack

4.全局安装vue-cli

5.命令行创建项目 

6.项目运行

---

1.安装node,下载地址：windows install(.msi) 64-bit

Node.js：

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。

Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。

Node.js 的包管理器 npm，是全球最大的开源库生态系统。

npm：

npm全称为Node Package Manager，是一个基于Node.js的包管理器，也是整个Node.js社区最流行、支持的第三方模块最多的包管理器(类似于java中的Maven)。

npm的初衷：JavaScript开发人员更容易分享和重用代码。

npm的使用场景：

允许用户获取第三方包并使用。

允许用户将自己编写的包或命令行程序进行发布分享。

Webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

vue-cli

vue-cli是vue的命令行工具，只要按照官网敲几行命令就可以新建一个基本的vue项目框架。方便快捷。

vue-cli和webpack是什么关系：vue-cli 里面包含了webpack， 并且配置好了基本的webpack打包规则，

新版的Node.js已自带npm，安装Node.js时会一起安装，安装完毕可以查看node和npm版本：

C:\Users\hspcadmin>node -v
v10.15.3

C:\Users\hspcadmin>npm -v
6.14.9

环境配置：这里的环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，之所以要配置，是因为以后在执行类似：npm install express [-g] （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，占C盘空间。

在F:\SP\node新建一个文件夹，名称为node_global
在F:\SP\node新建一个文件夹，名称为node_cache
创建完两个空文件夹之后，打开cmd命令窗口，输入；
npm config set prefix “F:\SP\node\node_global”；
npm config set cache “F:\SP\node\node_cache”；
“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”；
在【系统变量】下新建【NODE_PATH】，输入【F:\SP\node\node_global\node_modules
将【用户变量】下的【Path】新建：【F:\SP\node\node_global】

2.安装淘宝镜像（类似于阿里云的maven中央仓库镜像）

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

查看cnpm版本

C:\Users\hspcadmin>cnpm -v
cnpm@6.1.1 (E:\nodejs\node_global\node_modules\cnpm\lib\parse_argv.js)
npm@6.14.7 (E:\nodejs\node_global\node_modules\cnpm\node_modules\npm\lib\npm.js)
node@10.15.3 (E:\nodejs\node.exe)
npminstall@3.27.0 (E:\nodejs\node_global\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=E:\nodejs\node_global
win32 x64 10.0.18363
registry=https://r.npm.taobao.org

3.安装webpack

   利用cnpm安装webpack 命令行语句为

cnpm install webpack -g

安装完后在输入命令查看webpack版本

C:\Users\hspcadmin>webpack -v
4.44.1

4.全局安装vue-cli

vue-cli 3.0及以上版本：
cnpm install -g @vue/cli@版本号（@版本号都可以不写，默认最新版）

vue-cli 3.0以下版本：
cnpm install -g vue-cli@版本号

全局卸载vue-cli

npm uninstall vue-cli -g
    或
npm uninstall @vue/cli -g

验证vue版本：

C:\Users\hspcadmin>vue -V
@vue/cli 4.4.6
        或
C:\Users\hspcadmin>vue --version
@vue/cli 4.4.6

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

公司有自己的组件仓库，设置一下镜像

npm config set registry http://192.168.102.232:6060/repository/npm-public/

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

5.命令行创建项目 

具体创建项目可参考我另一篇博文：https://blog.csdn.net/qq_42169450/article/details/115128793

vue-cli 3.0及以上版本：
vue create "项目名称"

vue-cli 3.0以下版本：
vue init webpack "项目名称"

6.项目运行

vue-cli 3.0及以上版本：
npm run serve

vue-cli 3.0以下版本：
npm run dev