vue安装教程总结

简介：

      vue.js是一套构建用户界面的渐进式框架。比较简洁，用于解耦、可复用的组件来构造界面。轻量级（24kb min+zip），无依赖。与其他重量级框架不同。vue的核心库只关注视图层，它不仅易于上手，还便于与第三方或既有项目整合。

开发环境初始安装：

     切记：在cmd中运行命令以管理员身份运行

      1、安装node.js，node.js安装包及源代码下载地址 ：https://nodejs.org/en/download/

    2、安装npm，由于新版的node.js已经集成了npm，所以npm也一并安装好了，可以输入“npm -v”和“node -v”来进行测试是否安装成功。

    3、npm升级命令。

          npm   install  npm  -g

    4、使用淘宝定制的cnpm命令行工具代替默认的npm

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

  5、使用cnpm来安装模块

     cnpm  install [name]

  6、安装vue-cli，vue-cli是vue的脚手框架。

     npm  install -g vue-cli  回车，等待安装...

  7、输入vue，回车，若出现vue信息说明安装成功 输入vue -V显示vue版本号

  8、创建项目

     vue init webpack vue_test(项目文件夹)

     [cmd将目录切换到对应的文件下，切记不要手动创建vue_test],回车，出现操作

    

  9、安装依赖

     cd vue_test (项目名)

     npm install，回车，等待...

     [项目文件中，会多出一个node_modules文件夹，也就是之前安装的依赖]

  10、进入环境是否安装成功

      在cmd中输入  npm run dev

      [自动打开浏览器窗口，看到实际效果图]

     

   11、npm run build的意义

       在cmd中输入npm  run  build会在项目中创建一个dist文件夹；dist里的文件打包上传至服务器，减少对服务器的压力，一般是项目上线时，直接将dist里的文件打包上传至服务器。

  

安装中遇到的问题：

   在安装vue-cli脚手框架时，查看vue是否安装成功会显示，

     vue  不是内部或者外部命令...

   解决方法：

     1、在你安装的nodejs目录下搜索vue.cmd

       

     2、将vue.cmd的路径加入到Path环境中，然后重新打开cmd，输入vue或vue -V，可以看到问题已解决。