Windows下Vue开发环境搭建及相关问题


参考http://blog.csdn.net/wu__di/article/details/54234894 Windows下Vue开发环境搭建主要分为以下几步:

一、 node.js安装

    Vue项目通常使用webpack工具来构建,而webpack命令的执行是依赖于node.js环境的,所以需要安装node.js  该部分之前已完成。

二、cnpm的安装

     因为npm的许多依赖包在国外,下载速度比较慢,因此选择淘宝对npm的镜像服务器cnpm.在cmd下执行

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

     该部分执行【出现问题1

三、vue-cli的安装

       vue-cli是Vue官方提供的一个命令行工具,可用于快速搭建大型单页应用。安装命令:cnpm install -g vue-cli

       安装完成后,检验是否成功,输入vue,出现以下提示表示安装成功

Windows下Vue开发环境搭建及相关问题

这里,vue list 用来列出可以使用哪些模板:

Windows下Vue开发环境搭建及相关问题

四、尝试新建新的Vue项目

       (1) 在F:\vue-demo下新建项目vue-demo:输入vue init webpack vue-demo, 并进行相关初始化。【出现问题2

             初始化之后的项目目录如下:

Windows下Vue开发环境搭建及相关问题

       (2) 安装项目依赖的包

            目录切换到已建的新项目F:\vue-demo\vue-demo下,执行命令cnpm install,【出现问题3】安装依赖,安装结束后,该目录下多了node_modules目录:

Windows下Vue开发环境搭建及相关问题

       (3) 运行项目

            命令行中输入 cnpm run dev,执行完成后启动项目,浏览器中出现如下结果说明启动成功:

Windows下Vue开发环境搭建及相关问题

出现的问题:

问题1:

Windows下Vue开发环境搭建及相关问题

参考:https://segmentfault.com/q/1010000008624956/a-1020000008651515

解决方法:采用http安装

npm config set strict-ssl false

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


问题2:

Windows下Vue开发环境搭建及相关问题

参考:https://segmentfault.com/q/1010000007953827?_ea=1503310

解决方法:新建环境变量NODE_TLS_REJECT_UNAUTHORIZED,重启cmd


问题3:

Windows下Vue开发环境搭建及相关问题

问题:npm当前版本较低(2.15.1)

参考:http://blog.csdn.net/yhn1121/article/details/51332217

解决方法:更新npm版本,指令 npm update npm,更新后的版本为4.5.0