美文网首页
vue-cli脚手架搭建vue项目

vue-cli脚手架搭建vue项目

作者: 明月i | 来源:发表于2018-08-24 11:08 被阅读0次

    一、下载nodejs并安装和配置环境变量

      1.在nodejs的安装目录下新建node_cache和node_global两个文件夹。
    
      2.设置上面两个文件夹,以后安装的-g的全局包都会在配置的目录下了。
             npm config set prefix "D:\Program Files\nodejs\node_global"
             npm config set cache "D:\Program Files\nodejs\node_cache"
    
      3.配置环境变量
           打开计算机的环境变量,找到系统变量,新增一项 NODE_PATH,值为安装目录下的nodejs,
           D:\Program Files\nodejs\node_global\node_modules
    
     4.变量配置完,可以输入npm install express  命令试一下看能否正常用安装
    
     5.配置淘宝镜像cnpm,可以更快下载依赖包。
        npm install -g cnpm --registry=https://registry.npm.taobao.org (如果安装成功,就不用看下面ps的解决办法了)
    
        ps:这里有个问题,如果是nodejs更高的版本,比如现在是node-v10.8.0-x64.msi,由于版本问题,导致npm安装淘宝镜像会失败,这里可            以先将npm降级为npm-4.6.0,然后安装成功cnpm后,可以全部再升级为最新版本的npm和cnpm,完美。
      1. npm install npm@4.6.1 -g
      2. npm install -g cnpm --registry=https://registry.npm.taobao.org
      <!-- 如果安装后想全部更新到最新,就执行下面的命令 -->
      1. npm  install npm -g
      2. cnpm install cnpm -g
    

    二、安装vue-cli脚手架

      以上环境都配置好后,打开命令窗口,输入cnpm install vue-cli -g,会自动下载vue-cli安装到全局目录里去
    

    三、使用vue-cli脚手架创建项目

     1. vue init webpack 项目名      (项目名小写,其他一路回车,注意让安装eslint时候选择N)
     2. cd project
     3. cnpm install
     4. cnpm run dev
    

    四、完成安装和配置,看下面图片就可以知道启动成功了

    image

    相关文章

      网友评论

          本文标题:vue-cli脚手架搭建vue项目

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