美文网首页
windows下npm安装vue入门

windows下npm安装vue入门

作者: 秋天下雨淋湿冬天 | 来源:发表于2017-09-26 21:41 被阅读0次

    虽然一直都没有写技术博客的习惯,但是最近用win10系统开发vue项目,不得不写一篇安装指导,网上的安装入门教程只是太模糊了,小白根本看不懂,遇到问题也解决不了。

    1、下载nodejs

    下载地址:http://nodejs.cn/download/   

    就算你是64位Windows系统,建议下载32位的版本

    安装时建议不要修改安装目录,一路next按下去。

    完成后,Windows快捷键  Win+R  ,然后输入  cmd   回车进入。

    输入两个指令测试一下安装效果 :

    node -v

    npm -v

    应该会显示版本号。

    2、npm换源

    默认源在国外,根据众所周知的原因,不换的话会安装很慢,国内可以换到淘宝的镜像。

    这里只讨论持久使用方式,临时使用和cnpm方式请自行百度。

    npm config set registry https://registry.npm.taobao.org

    // 配置后可通过下面方式来验证是否成功

    npm config get registry

    3、安装webpack和vue-cli

    安装webpack

    npm install webpack -g

    安装vue脚手架

    npm install vue-cli -g

    在安装vue-cli时很可能报错,试一下下面步骤。

    //如果vue-cli正确安装,请跳过清理cache这一步    

    npm cache clean --force

    //然后再试一下安装vue脚手架

    npm install vue-cli -g

    完成后查看全局安装的内容,会显示以上两项的版本号

    npm list -g --depth 0

    4、环境变量添加

    在系统中找到vue.cmd的位置,把文件夹路径复制一下,添加到环境变量的系统变量Path中。

    //我的位置是:

    C:\Program Files (x86)\nodejs

    //请根据你的安装位置选择

    关闭命令行工具再重新打开,测试一下vue的安装情况

    vue -V

    如果出现版本号,说明安装成功!

    5、安装demo

    在硬盘上找一个文件夹放工程用的,在终端中进入该目录

    cd  目录路径

    //如果不能切换目录,试试  cd /d 目录路径

    根据模板创建项目

    vue init webpack-simple 工程名字<工程名字不能用中文>

    或者创建 vue1.0 的项目

    vue init webpack-simple#1.0 工程名字<工程名字不能用中文>

    会有一些初始化的设置,可以直接回车默认。

    cd  进入创建的工程目录

    安装项目依赖

    npm install

    启动项目

    npm run dev

    完成!会弹出 hello vue 页面。

    如果遇到报错,这一句通常会有效。一般小毛病都能解决!

    npm cache clean --force



    如果这篇文章帮到了你,请点赞或者打赏!谢谢!

    相关文章

      网友评论

          本文标题:windows下npm安装vue入门

          本文链接:https://www.haomeiwen.com/subject/elueextx.html