在windows下搭建vueJS开发环境

转自:https://www.cnblogs.com/RexSheng/p/6934413.htmlhtml

  1. nodejs官网http://nodejs.cn/下载安装包,无特殊要求可本地傻瓜式安装,这里选择2017-5-2发布的 v6.10.3,也可选择阿里云镜像https://npm.taobao.org/mirrors/node/,2019/3/23更新:建议选择v10版本以上,官方最新Vue-Cli4将移除v9的支持
  2. cmd命令行:vue

    node -v //显示node版本 v8.1.2node

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

  3. 因为有些npm有些资源被屏蔽或者是国外资源的缘由,常常会致使用npm安装依赖包的时候失败,全部我还须要npm的国内镜像---cnpm
  4. Cmd命令行中输入npm install -g cnpm --registry=http://registry.npm.taobao.orgweb

  5.  安装vue-cli脚手架构建工具vue-cli

  6. 至此,咱们须要的环境及工具已经准备好了。npm

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

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

  10.  主要用的包都在package.json中,IDE使用的是VSCode,以下图架构

  11.  cd到咱们的项目文件夹firstVue中,运行命令cnpm install 安装包,(注意:咱们已经使用淘宝镜像cnpm)

  12. 安装完以后,咱们发现项目文件夹下多了一个node_modules目录,里面就是项目依赖包资源

  13. 安装完依赖包以后,就能够运行整个项目了。 运行项目在项目目录中,运行命令 npm run dev ,会用热加载的方式运行咱们的应用,热加载能够让咱们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

  14. 若是启动过程当中出现端口冲突问题,只须要将config目录下的index.js文件中dev端口由8080改成8088

相关文章
相关标签/搜索