如何创建运行一个vue项目

搭建环境

在搭建环境时，我们需要以下三个东西：

node.js环境（npm管理包）
cnpm npm的淘宝镜像
vue-cli 脚手架构建工具

1.安装node.js

进入node.js官网 下载并安装node.

安装完打开命令行工具（以管理员形式打开）:

输入 :

node -v 

出现以下相应版本号则说明安装成功：

npm包是集成在node中的，所以，直接输入:

npm -v

会显示出npm的版本信息，如下所示：

查到版本信息表示node环境已安装完成。

2.安装淘宝镜像

输入:

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

安装完成后，就可以用cnpm代替npm来安装依赖包。

3.安装vue-cli脚手架构建工具

npm install -g @vue/cli@版本号 //指定版本号来安装
npm install -g @vue/cli@3.6.0

安装完之后，输入：

vue -V

来查看cli的相应版本号。

注意：只有vue-cli3以后的版本才能用 vue create 项目名 来创建一个vue项目。

（怎么卸载vue-cli：以管理员形式运行命令窗口， 输入：

npm uninstall vue-cli -g

然后，输入 vue -V 提示“vue不是内部或外部命令……”，证明卸载成功。
）
创建项目
创建一个存放项目代码的文件夹，然后在该文件夹下cmd打开命令窗口

输入：

vue create 项目名

会生成一个文件夹，打开文件夹有以下目录：

然后删除App.vue和index.html中的一些默认配置。
如果要在components下新建创建一个vue文件，需要修改以下配置：


然后输入 :

npm run serve

运行项目，记得要在新创建的项目名下进行运行。