1. 先安装node运行环境
      下载网址 https://nodejs.org/en/或者http://nodejs.cn/
    2. 检查node是否安装成功
      命令行窗口直接输入
      1. $ node -v

      如果输出版本号,说明我们安装node 环境成功
      再查看npm版本号

      1. $ npm -v
    3. 安装淘宝镜像(此步骤是为了提高下载速度,可以忽略)
      如果访问外网比较慢,可以使用淘宝镜像。
      安装淘宝镜像,在命令行中输入 
      1. $ npm install -g cnpm --registry=https://registry.npm.taobao.org

      安装之后我们就可以使用cnpm代替npm了,下载速度急速提升呐。当然,如果不想使用淘宝镜像,直接用npm也是可以的。

    4. 接下来就是最关键的一步-----vue-cli
      1. $ cnpm install -g vue-cli

      安装成功之后查看安装的版本号(v要大写)

      1. $ vue -V

      如果能输出本版好证明安装成功。

    5. 接下来就是创建项目了
      5.1 初始化项目 
      1. $ vue init webpack <你的项目名称>

      一直回车可以看到下图

      其中的每一项都可以自己根据自己的需要去填写。
      Install vue-router:是否安装vue-router,我们项目中肯定会用到,所以选择yes
      Use ESLint to lint your code:是否需要 js 语法检测 ,目前用不到,选择no
      直到安装成功。

    6. 进入到你的项目文件夹
      执行
      1. $ npm run dev

      如果没报错,出现下图

      那么恭喜你,你的第一个vue项目就创建成功了。
      如果报错了,很简单,只需要输入

      1. $ cnpm install

      安装所需要的依赖,然后在执行

      1. $ npm run dev

      即可。

    7. 如果想要打包,可以输入
      1. $ npm run build

      会在名目文件见中自动生成一个新的文件夹 dist

      如果打包之后,访问页面出现白屏问题,说明打包的路径有问题,只需要找到config文件夹,打开index.js文件,找到

      在/之前加上一个 . 即可

    8. 至此,一个完整的基于vue-cli创建的vue项目就完成了。

vue基本开发环境搭建的更多相关文章

  1. windows下vue.js开发环境搭建教程

    这篇文章主要为大家详细介绍了windows下vue.js开发环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中 ...

  2. vue的开发环境搭建命令加图解

    vue的开发环境的搭建 不管什么软件我们都要去官网下载安装,这是作为专业程序员的安全意识. 1.安装node.js 官方下载的页面:点击这里 大约展示的页面是这样子的!我们演示是windows 64位 ...

  3. 应用一:Vue之开发环境搭建

    简单分享下vue项目的开发环境搭建流程~ 1.安装nodeJS vue的运行是要依赖于node的npm的管理工具来实现,下载地址:https://nodejs.org/en/.安装完成之后以管理员身份 ...

  4. vue.js开发环境搭建以及创建一个vue实例

    Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js ...

  5. Electron+Vue+ElementUI开发环境搭建

    Node环境搭建 本文假定你完成了nodejs的环境基础搭建: 镜像配置(暂时只配置node包镜像源,部分包的二进制镜像源后续讨论).全局以及缓存路径配置,全局路径加入到了环境变量 $ node -v ...

  6. vue.js开发环境搭建

    1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html) 2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd ...

  7. 【vue基础学习】vue.js开发环境搭建

    1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html) 2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd ...

  8. vue.js 开发环境搭建

    1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html) 2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd ...

  9. Vue.js开发环境搭建的介绍

    包含了最基础的Vue.js的框架,包含了打包工具和测试工具,开发调试的最基本的服务器,不需要关注细节,只需关注Vuejs对项目的实现 npm在国内的网络使用较慢,所以推荐下载安装淘宝的镜像 1: 2: ...

  10. Vue+VSCode开发环境搭建

    时间2019.9月 1. 安装 nodeJS; 安装VScode 安装好nodeJS之后,默认会安装好npm 测试 nodeJS 和npm是否可以执行 node -v npm -v 1.1 VScod ...

随机推荐

  1. nginx篇高级用法之基于TCP/UDP的四层调度

    nginx 从1.9版本开始支持基于TCP/UDP的四层调度,在编译nginx时使用--with-stream开启该模块 支持TCP/UDP调度时,支持给所有的软件做调度器,例如:nfs smb ft ...

  2. [考试反思]0903NOIP模拟测试36:复始

    因为多次被说颓博客时间太长于是 真香 恢复粘排行榜的传统. 大体上就是,T1A的前三,剩下的T2A的排名,再然后按照T3暴力得分排名. T1是个暴力.3个A的5个得分的.数据点极强爆零率极高. 我的思 ...

  3. 「刷题」卡特兰数&prufer序列

    1.网格 转换模型,翻折容斥出解. 2.有趣的数列 抽象一下模型,把奇数项当作横坐标,偶数项当作纵坐标,就是从n*n矩阵左下角走到右上角并且每一步x<=y的方案数,发现是卡特兰数,关于gcd,可 ...

  4. CSPS模拟 45 乔迁之喜

    搬家了qwq 暑假在机房藏的吃的还没来得及吃qwq 有缘人会发现它的(其实并没有) 我居然也能和skyh并列了啊sto T1 安排打怪 不可能让左边的人越过右边人打的怪去打更靠右的怪吧? $O(n^2 ...

  5. 【PyTorch教程】P3. Python学习中的两大法宝函数(当然也可以用在PyTorch)

    温馨提示:为了更好的教程体验,提供视频.阅读地址 Youtube: https://www.youtube.com/playlist?list=PLgAyVnrNJ96CqYdjZ8v9YjQvCBc ...

  6. Mac中的Python安装selenium,结合chrom及chromdriver使用

    一.安装selenium 1.在终端通过命令安装 pip3 install -U selenium 二.准备环境 1.在电脑中安装谷歌浏览器chrom,和下载估计浏览器驱动chromdriver,以下 ...

  7. 使用springcloud开发测试问题总结

    使用springcloud开发测试 如下描述的问题,没有指明是linux部署的,都是在windows开发环境上部署验证发现的. Issue1配置客户端不使用配置中心 问题描述: 配置客户端使用配置中心 ...

  8. vmware centos共享文件夹

    vmware centos共享文件夹 查看VMware Tools 是否安装成功 <pre>vmware-hgfsclient</pre> 出现共享文件夹<pre> ...

  9. 怎么把CAT客户端的RootMessageId记录到每条日志中?

    什么是RootMessageId? 为了理解RootMessageId先简单介绍一下CAT的数据结构设计.CAT客户端会将所有消息都封装为一个完整的消息树(MessageTree),消息树可能包括Tr ...

  10. 私有git搭建

    Git简介(目前世界上最先进的分布式版本控制系统) 那什么是版本控制系统? 你可以把一个版本控制系统(缩写VCS)理解为一个特殊的“数据库”,在需要的时候,它可以帮你完整地保存一个项目的快照.当你需要 ...