新建Vue项目步骤

新建Vue项目步骤

​ Vue项目的创建可以采用cdn和CLI两种方式，cdn可以通过在项目中引入<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>来使用vue。但在构建vue的生产项目时一般采用CLI的方式，下面将介绍如何使用CLI脚手架来创建一个vue项目。

一、下载并安装Node.js

​ 下载地址

​ 下载完成后在命令行输入node -v，显示node版本信息如下，表明 安装成功

​

二、下载Vue CLI脚手架

1. 进入命令行模式，使用npm install -g vue-cli命令安装全局的Vue CLI脚手架，如果嫌npm太慢，可以使用淘宝提供的cnpm来安装，cnpm的安装和配置可参考如下网站：cnpm的安装和使用。如果是在公司内网开发，可以把源切换成公司的源：npm切换源的方法

2. 安装完成后，可以使用vue --version命令来查看vue cli是否安装成功，输入命令后显示如下信息表示安装成功：

   

三、生成项目模板

1. 使用vue init webpack my-project生成一个名为my-project的项目模板，结果如下：

   [外链图片转存失败(img-R4NjXjk4-1567577751629)(C:\Users\w1509\AppData\Roaming\Typora\typora-user-images\1566147458542.png)]

2. 模板生成完后，使用npm install命令下载项目依赖的模块，如果已经在第一步中选择安装完依赖后执行该命令，则不需要手动输入，项目在初始化完成后会自动执行该命令。

3. 以上两步执行完后，使用cd my-project命令进入到该项目的目录下，执行npm run dev 运行该项目，结果如下：

   

4. 在浏览器中输入http://localhost:17112，显示如下界面，表明Vue项目已成功创建

7112，显示如下界面，表明Vue项目已成功创建