从零0开始完整搭建一个VUE项目

一、安装node环境

1、下载地址为：https://nodejs.org/en/

2、检查是否安装成功：node -v 如果输出版本号，说明我们安装node环境成功。

 

npm包管理器是集成在Node.js中了，所以在安装Node.js的时候就已经自带了npm。

输入npm -v可得到npm的版本。

由于资源的限制，安装npm依赖包的时候经常失败，建议使用npm的国内镜像cnpm 命令行工具代替默认的npm。国内npm镜像https://npm.taobao.org/

3、国内npm镜像：npm install -g cnpm ––registry=https://registry.npm.taobao.org 

     检查是否安装成功：cnpm -v

 

 二、搭建vue项目环境

1、cnpm 全局安装vue-cli，输入命令：cnpm install--globalvue-cli  安装vue-cli；

  　 验证是否安装成功：vue，出来vue的信息，及说明安装成功；

 

　上面命令不行的话，可以用下面的

C:\Windows\System32>npm install -g vue-cli
npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
C:\Users\86188\AppData\Roaming\npm\vue -> C:\Users\86188\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
C:\Users\86188\AppData\Roaming\npm\vue-list -> C:\Users\86188\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list
C:\Users\86188\AppData\Roaming\npm\vue-init -> C:\Users\86188\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
+ vue-cli@2.9.6
added 236 packages from 204 contributors in 94.863s

 

创建项目

3、在本地新建FirstVueProject文件夹

 

 

4、打开命令窗口并进入该位置

 

 

接着输入：vue init webpack 然后出现以下后，输入 y（确认在当前目录下建了vue项目）

 

 

等待安装结束。。

5、安装所需依赖

 

 

6、输入npm run dev

 

 

访问地址，可见页面