1. nodejs官网http://nodejs.cn/下载安装包,无特殊要求可本地傻瓜式安装,这里选择2017-5-2发布的 v6.10.3
  2. cmd命令行:

    node -v //显示node版本 v6.10.3

    npm -v  //显示npm包管理器版本 3.10.10

  3. 由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内镜像---cnpm
  4. Cmd命令行中输入npm install -g cnpm --registry=http://registry.npm.taobao.org
  5.  安装vue-cli脚手架构建工具
  6. 至此,我们需要的环境及工具已经准备好了。

    接下来,我们使用vue-cli来构建项目。

  7. 首先,我们先选择进入到e我们的工作目录为 E:\个人\VueJS。此目录需先建好,目前是空的,这个工作目录以后会添加各个项目目录。
  8. 在VueJs目录下,运行命令vue init webpack firstVue。其中,webpack是构建工具、模块打包器,也就是整个项目是基于webpack的。其中,firstVue是项目文件夹的名称,这个文件夹会自动生成在vuejs这个工作目录中。
  9. 安装过程中,需要我们输入项目名称,描述,作者,版本(独立版),使用ESLint规范等等,此时,我们看到工作目录下已经自动生成了目录firstVue,如下图。

  10.  主要用的包都在package.json中,如下图
  11.  
  12.  cd到我们的项目文件夹firstVue中,运行命令cnpm install 安装包,(注意:我们已经使用淘宝镜像cnpm)
  13. 安装完之后,我们发现项目文件夹下多了一个node_modules目录,里面就是项目依赖包资源
  14. 安装完依赖包之后,就可以运行整个项目了。 运行项目在项目目录中,运行命令 npm run dev ,会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。
  15. 如果启动过程中出现下方问题,只需要将config目录下的index.js文件中dev端口由8080改为8088

57.搭建Vue环境的更多相关文章

  1. 初次搭建vue环境(最基础的)

    一直以来觉得搭建环境是自己的短板,恰巧老大跟我说他刚才面试一个有4年工作经验的人,给那面试的人出了到机试题,给了1小时的时间连环境都没搭好.且不说那人的工作经验是否掺有水分,自己还是有点尴尬的,以前的 ...

  2. VUE-Windows系统下搭建vue环境

    一.安装node.js(https://nodejs.org/en/) 下载完毕后,可以安装node,建议不要安装在系统盘(如C:).注意记下路径..   此处默认安装这4项即可,点击Next按钮. ...

  3. 18.搭建 vue 环境

    第一步 node环境安装 1.1 如果本机没有安装node运行环境,请下载node 安装包进行安装1.2 如果本机已经安装node的运行换,请更新至最新的node 版本下载地址:https://nod ...

  4. 搭建Vue环境总是出错,就重新安装就好了

    总是报错,还不如重新安装.. 错误千奇百怪,解决了 这个错误又会出现另外一个. 百度了一个挺好用的e 在window下搭建Vue.Js开发环境   nodejs官网http://nodejs.cn/下 ...

  5. 如何搭建Vue环境?

    搭建vue的开发环境: https://cn.vuejs.org/v2/guide/installation.html 1.     必须要安装nodejs cnpm  下载包的速度更快一些. 地址: ...

  6. 手动搭建Vue环境

    Vue+webpack+babel环境搭建 github地址 https://github.com/haoyongliang/webpack-babel-Vue 1.首先要了解Vue项目结构 简单的目 ...

  7. 搭建vue环境

    1. 下载安装nodejs 截至2018-06-05 最新稳定版本为 8.11.2,直接 next ,不改目录. PS C:\Users\Administrator> node -v v8.11 ...

  8. 在windows下用脚手架搭建vue环境

    做了几个月vue项目,最近两个项目使用脚手架搭建的,确实用脚手架搭建方便了许多,想想以前自己手配的时候,确实是... 1.在这之前我是默认你已经使用过vue的,也默认你已经安装了node.js 2.接 ...

  9. 手把手教你搭建 vue 环境

    第一步 node环境安装 1.1 如果本机没有安装node运行环境,请下载node 安装包进行安装1.2 如果本机已经安装node的运行换,请更新至最新的node 版本下载地址:https://nod ...

随机推荐

  1. [Linux]Linux read/write

    Read 默认read是block模式,如果想设置非block默认,则open时候参数添加O_NONBLOCK read block模式下,并非等到Buffer满才返回,而是只要有data avaia ...

  2. mysql密码的坑

    一段时间没用本机的mysql,忘了root密码,从网上找的修改方法用起来大多都有问题.mysql版本8.0.12. 网上大多数思路:修改msql启动方式为带--skip-grant-tables参数: ...

  3. 东南亚 SAP 实施 马来西亚税收在SAP的设计和实现

    马来西亚属于中等收入国家,现行税种主要有: 公司所得税.个人所得税.不动产利得税.石油所得税.销售税.合同税.暴利税.服务税和关税等. (一)主要税种1.公司所得税 ⑴ 纳税人 公司所得税的纳税人分为 ...

  4. Module 10:I/O流(java如何实现与外界数据的交流)

    Module 10:I/O流(java如何实现与外界数据的交流) Input/Output:指跨越出了JVM的边界,与外界数据的源头或者目标数据源进行数据交换.               输出   ...

  5. 并发编程基础之wait以及notify的用法

    一:概念 线程通信中经常用到wait和notify,顾名思义,wait即让当前线程处于等待状态,notify通知锁对象 上的另一个线程被唤醒,这里的唤醒是指可以去争夺锁资源,nofityAll是唤醒该 ...

  6. TensorFlow at Google I/O 2018

    2018 google I/O 上关于TF新功能以及TF技术生态方面的一些总结,更具体的内容可以去看2018 tfdev summit,这里面的内容会更加详细丰富.总的来说TensorFlow在庞大的 ...

  7. leetcode-Evaluate the value of an arithmetic expression in Reverse Polish Notation

    leetcode 逆波兰式求解 Evaluate the value of an arithmetic expression in Reverse Polish Notation. Valid ope ...

  8. 将 ASP.NET Core 2.0 项目升级至 ASP.NET Core 2.1 RC 1

    今天微软发布了 .NET Core 2.1 RC 1 ,虽然只是 Release Candidate 版,但已经可以在生产环境中使用. NET Core 2.1 RC is supported by ...

  9. 使用dom4j中SAXReader解析xml数据

    public ApiConfig(String configFilePath) throws DocumentException{ SAXReader reader = new SAXReader() ...

  10. RoR-Scaffolding

    Scaffolding能快速让rails跑起来 同时也生成JSON response rails g scaffolding "xxx" xxy:integer 生成scaffol ...