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

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

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

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

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

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

      $ vue -V

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

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

      一直回车可以看到下图

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

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

      如果没报错,出现下图

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

      $ cnpm install

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

      $ npm run dev

      即可。

    7. 如果想要打包,可以输入
      $ 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. MIT线性代数:4.A的LU分解

  2. CSPS模拟 86

    看见异或两个字就孩怕 T1 按位? T2 这道异或稍水啊233 貌似可以打表找找规律 emm七种转移,有重复刷表 优化一下? T3 skyh已经接了2杯水了(实际情况他已经ak了) cbx开始抬头傻笑 ...

  3. Spring Boot2 系列教程(二十一)整合 MyBatis

    前面两篇文章和读者聊了 Spring Boot 中最简单的数据持久化方案 JdbcTemplate,JdbcTemplate 虽然简单,但是用的并不多,因为它没有 MyBatis 方便,在 Sprin ...

  4. EffectiveJava-4

    一.基本类型优先于装箱基本类型 Java的基本数据类型也叫做内置类型是java语言本身提供的数据类型,是引用其他类型的基础.Java的基本数据类型分为:整数类型.浮点类型.字符类型.布尔类型这四个类型 ...

  5. 通俗易懂了解Vue组件的通信方式

    1.前言 Vue框架倡导组件化开发,力求将一个大的项目拆分成若干个小的组件,就如同我们小时玩堆积木一样,一个大房子是由若干个小积木组成.组件化开发最大问题就是组件之间数据能够流通,即组件之间能够通信. ...

  6. 『题解』洛谷P4016 负载平衡问题

    title: categories: tags: - mathjax: true --- Problem Portal Portal1:Luogu Portal2: LibreOJ Descripti ...

  7. Linux Shell | 解析xml节点

    01 xml文件 # user.xml <user> <name>Toy</name> <sex>man</sex> <room/&g ...

  8. MySQL系列:MySQL的基本使用

    数据库的基本操作 在MySQL数据库中,对于一个MySQL示例,是可以包含多个数据库的. 在连接MySQL后,我们可以通过 show databases; 来进行查看有那么数据库.这里已经存在一些库了 ...

  9. 使用VSCode调试Egret项目中的ts代码

    发布一次Android项目后,会在代码里,生成对应的.map文件.这样就可以在编辑器里或是Chrome里面对相应的TS文件进行断点调试了. 实际只要在tsconfig.json里面配置一下," ...

  10. T-SQL, Part I: LIKE Pattern

    The basic usage of LIKE pattern: %: it would be placed at the end and/or the beginning of a string. ...