美文网首页
搭建vue环境

搭建vue环境

作者: imTinaz | 来源:发表于2018-11-07 17:25 被阅读0次

第一步:node环境安装

1.如果本机没有安装node运行环境,请下载node 安装包进行安装
2.如果本机已经安装node运行环境,请更新至最新的node 版本
下载地址:https://nodejs.org/en/ 或者 http://nodejs.cn/

第二步:node环境检测

为了快乐的使用命令行,我们推荐使用 gitbas
1.下载git 并安装
下载地址 https://git-for-windows.githu...
安装成功后 右键菜
[图片]
我们可以看到 Gti Bash Here 。说明我们已经安装成功git

  1. 检测node 是否安装成功
    右键空白,选择 Gti Bash Here 弹出


    微信截图_20181107173159.png
  2. 在终端输入 node -v 如果输出版本号,说明我们安装node 环境成功,顺便输入 npm -v 查看npm版本号


    微信截图_20181107173434.png

第三步 vue-cli脚手架安装

1.如果访问外网比较慢,可以使用淘宝的镜像 https://npm.taobao.org/
打开命令终端 npm install -g cnpm --registry=https://registry.npm.taobao.org
回车之后,我就可以可以快乐的用 cnpm 替代 npm

001.png
看到这样
微信截图_20181107173743.png
恭喜你,你已经成功安装了 cnpm
但是此后,我们还是使用 npm 来运行命令
  1. 接下来就是重点了 安装vue-cli
    npm install vue-cli -g


    微信截图_20181107173918.png

    如果你很幸运,那么接下来就是这样的


    微信截图_20181107173948.png
    我们成功了
  2. 进入我们的项目目录,右键 Gti Bash Here
  3. 初始化项目 vue init webpack supplychain_system


    微信截图_20181107174150.png

    一直回车


    image.png
    只有 vue-router 和 esline 选择yes
    image.png

    ctrl+c结束

  4. 进入 cd supplychain_system
  5. 执行 npm install
  6. 接下来执行 npm run dev


    image.png

    浏览器会自动打开


    image.png

参考 :https://segmentfault.com/a/1190000008922234

相关文章

  • 前端环境搭建

    前端开发环境的搭建 vue环境搭建(node,vue-cli,vue) https://www.jianshu.c...

  • vue+ionic

    vue的环境搭建: npm install -g @vue/cli (若已搭建跳过)vue create i...

  • Vue之ToDoList实战

    之前的文章windows下搭建vue开发环境,我们已经搭建好了vue的环境,并且写了Vue系列之WebPack与E...

  • vue-vscode开发环境搭建

    vue-vscode环境搭建

  • Mac上搭建vue环境

    // 转发自:vue开发环境搭建Mac版 vue开发环境的搭建由于本人使用的是mac,所以环境是windows的下...

  • vue-cli单页面应用

    vue-cli是vue搭建环境脚手架,只需要几个命令就可以搭建开发环境。 vue-cli脚手架搭建 1.安装nod...

  • Vue开发环境搭建与创建项目

    Vue开发环境的搭建,直接看大神写的教程吧:Vue环境搭建[https://blog.csdn.net/wu__d...

  • Express+Vue+MongoDB

    环境搭建 首先要安装vue-cli和express-generator 使用手脚架搭建vue环境和express环...

  • 2019-06-15

    Node.js、Vue.js 运行环境搭建记录 参考链接:Vue.js 运行环境搭建详解(基于windows的手把...

  • Vue(7)

    一、环境搭建 下面我们需要为后面要做的Vue项目搭建开发环境。 1、基本的运行环境 该项目使用node& vue在...

网友评论

      本文标题:搭建vue环境

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