如何利用vue-cli和webpack搭建vuejs项目

1、安装node和npm

    下载地址：https://nodejs.org/zh-cn/

    测试是否安装成功：node  -v如果出现版本号，就表示成功

    

注：Node中自带安装了npm,故不再安装

2、  安装cnpm镜像

安装命令：npm install -g cnpm  --registry=https://registry.npm.taobao.org

测试是否安装成功：cnpm –v，出现如下代码，则表示安装成功

      

3、安装vue-cli脚手架工具

安装命令： npm install -g vue-cli

测试是否安装成功：vue –V ，出现版本号就说明成功

          

    注：vue –v当输入小写的时候，可能会提示命名错误，这时将小写v改成大写就好了V

4、 创建一个基于webpack模板的项目

在某个目录下，创建一个基于webpack模板的新项目，硬盘新建工程文件夹，在终端中使用cd命令进入该目录

             

进入e盘命令：e:

进入e盘vueDemo：cd vueDemo

vue init webpack my-project

   

 后面就是回车和输入n，最后一个命令我输入的是y

     

5、  安装依赖

      cd到项目目录，命令：cd my-project

     安装依赖：cnpm install

6、  运行项目测试是否搭建成功

       命令：npm run dev

  

  浏览器中输入http://localhost:8080/

 出现以下界面表示成功