VUE （一）安装及创建

川长思鸟来 2021-12-12 11:27 300阅读 0赞

### 1.[安装Node][Node] ###

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzY5OTQ0_size_16_color_FFFFFF_t_70][] ###

下载完毕后，可以安装node。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzY5OTQ0_size_16_color_FFFFFF_t_70 1][]

![format_png][]

查看版本

![20190715104505944.png][]

### 设置global和cache路径 ###

npm config set prefix "D:\\Software\\nodejs\\node\_global"

npm config set cache "D:\\Software\\nodejs\\node\_cache"

### 安装cnpm ###

首先安装“中国的npm”——cnpm

参考网址如下：[http://npm.taobao.org/][http_npm.taobao.org]

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

### 设置环境变量 ###

修改PATH,添加D:\\Software\\nodejs\\node\_global目录

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzY5OTQ0_size_16_color_FFFFFF_t_70 2][]

新增NODE\_PATH环境变量

D:\\Software\\nodejs\\node\_global\\node\_modules

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzY5OTQ0_size_16_color_FFFFFF_t_70 3][]

### 2.**安装Vue** ###

cnpm install vue -g

![20210203145648382.png][]

或

npm install vue -g

![20190715105420236.png][]

### 3.安装[Vue CLI][] ###

速度有点慢，须耐心等待

// 这样安装的是 vue 2.x
    cnpm install vue-cli -g   
     
    // 这样安装的是 vue 最新版
    npm install -g @vue/cli

可将npm的仓库地址改为淘宝镜像

npm config set registry https://registry.npm.taobao.org --global
    npm config set disturl https://npm.taobao.org/dist --global

安装完成，使用查看版本

vue --version

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzY5OTQ0_size_16_color_FFFFFF_t_70 4][]

## ##

### 4.快速开发原型 ###

你可以使用 `vue serve` 和 `vue build` 命令对单个 `*.vue` 文件进行快速原型开发，不过这需要先额外安装一个全局的扩展：

npm install -g @vue/cli-service-global

`vue serve` 的缺点就是它需要安装全局依赖，这使得它在不同机器上的一致性不能得到保证。因此这只适用于快速原型开发。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzY5OTQ0_size_16_color_FFFFFF_t_70 5][]

### 5.创建项目 ###

**方法1.打开存放新建项目的文件夹**

打开开始菜单，输入 CMD，或使用快捷键 win+R，输入 CMD，敲回车，弹出命令提示符。打开你将要新建的项目目录

或在要创建的文件夹下shift+鼠标右键打开命令窗口

## vue create ##

运行以下命令来创建一个新项目：

vue create hello-world

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzY5OTQ0_size_16_color_FFFFFF_t_70 6][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzY5OTQ0_size_16_color_FFFFFF_t_70 7][]

**方法2.旧版本创建项目**

**安装vue/cli-init**

npm install -g @vue/cli-init

## ##

### ![20190715105903397.png][] ###

在当前目录下输入“vue init webpack-simple 项目名称（使用英文）”。

![format_png 1][]

### 6.安装工程依赖模块 ###

定位到hello-world的工程目录下，安装该工程依赖的模块，这些模块将被安装在：hello-world\\node\_module目录下，node\_module文件夹会被新建，而且根据package.json的配置下载该项目的modules

cd hello-world
    npm install

### 7.运行项目 ###

npm run serve

![20190715112235915.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzY5OTQ0_size_16_color_FFFFFF_t_70 8][]

[Node]: https://nodejs.org/en/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzY5OTQ0_size_16_color_FFFFFF_t_70]: /images/20211211/d7c7a4f91da24e90a0d175baaee9b793.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzY5OTQ0_size_16_color_FFFFFF_t_70 1]: /images/20211211/72e10fe05c774b0192fd83425886b34b.png
[format_png]: /images/20211211/42e0bed36f3b41b79a1184bb54e384dd.png
[20190715104505944.png]: /images/20211211/3ba48eb1504a4d3592072a277479ec45.png
[http_npm.taobao.org]: https://link.jianshu.com/?t=http://npm.taobao.org/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzY5OTQ0_size_16_color_FFFFFF_t_70 2]: /images/20211211/660072dec28b4bed8e5fe2cdca08af83.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzY5OTQ0_size_16_color_FFFFFF_t_70 3]: /images/20211211/68beace55eb14cd89a68a2bc76721e6a.png
[20210203145648382.png]: /images/20211211/63f62c0572774e719c396e28ae27ccb6.png
[20190715105420236.png]: /images/20211211/4100e644c41a4445b0b8c4d17d4573a9.png
[Vue CLI]: https://cli.vuejs.org/zh/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzY5OTQ0_size_16_color_FFFFFF_t_70 4]: /images/20211211/2f7aa877752849ceb1a70b31d56bd78f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzY5OTQ0_size_16_color_FFFFFF_t_70 5]: /images/20211211/81e7d7276368480e89340270b327c130.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzY5OTQ0_size_16_color_FFFFFF_t_70 6]: /images/20211211/2e109a22a2ae45319a0ca33112d28b81.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzY5OTQ0_size_16_color_FFFFFF_t_70 7]: /images/20211211/b7ac7c6f187244aa8da6273d56c64592.png
[20190715105903397.png]: /images/20211211/a7021822bd0c4b18ad667cc522c551a4.png
[format_png 1]: /images/20211211/71fda6c1d07f4748a383140e12afbb90.png
[20190715112235915.png]: /images/20211211/e1ff48c77919475e8efc1b3d1e86e85e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzY5OTQ0_size_16_color_FFFFFF_t_70 8]: /images/20211211/3f4e2bf3ec534f188a86bf5509169faf.png