Hyper.js 搭配 Nodejs 食用更佳
  WebVue   0 评论

Hyper.js 搭配 Nodejs 食用更佳

  WebVue   0 评论

软件源

安装环境

Nodejs 安装

使用默认的路径或者是选择自定义的路径,然后一路点击 Next 即可完成安装,安装完成以后会自动把 Nodejs 的安装路径放到系统变量中

Nodejs安装

Hyper.js 安装

下载双击运行即可自动安装

环境配置

  1. 新建相关文件夹

    • D:\nodejs\node_cache
    • D:\nodejs\node_global

    创建仓库文件夹

  2. Hyper.js 环境变量配置

    打开 Hyper.js,点击左上角菜单,依次选择 Edit → Preferences,打开配置文件

    配置Hyper.js环境

    滚动到 env 配置项,依据自己的实际安装路径填写以下环境变量

      // for environment variables
    env: {
       nodejs: 'C:\Program Files\nodejs',
       nodePath: 'D:\nodejs\node_global'
    }

    保存并重启 Hyper.js

  3. 测试 Nodejs 是否安装成功以及环境变量是否配置完毕

    node -v

    执行结果

    测试Nodejs安装是否成功

  4. 配置本地仓库

    npm config set prefix "D:\nodejs\node_global"
    npm config set cache "D:\nodejs\node_cache"

    检验是否设置成功

    npm list -global

    执行结果(我已经安装了相应包,但路径应该和配置的保持一致)

    测试本地仓库是否配置成功

    配置系统环境变量 PATH ,追加一下内容 ;D:\nodejs\node_global

    加入系统环境变量

  5. 将 node 的源换为淘宝源

    npm config set registry=http://registry.npm.taobao.org

    测试是否配置成功

    npm config get registry

    执行结果

    测试是否使用淘宝源

安装和配置 Vue.js

  1. 安装 Vue.js

    npm install vue -g
  2. 安装 vue-router

    npm install vue-router -g
  3. 安装 Vue 脚手架

    npm install vue-cli -g
  4. 测试是否安装成功

    vue -V

    执行结果

    测试vue是否安装成功

新建 Vue 项目

  1. 打开到需要保存的项目路径

    打开到盘符

    E:

    执行结果

    打开到盘符

    打开到路径

    cd projects/vue

    执行结果

    打开到文件夹

  2. 新建项目, 这里以 vue-demo 作为文件夹名称,并依次输入项目名称、项目描述、作者等等(自行翻译查看)

    vue init webpack vue-demo

    执行结果

    新建项目

  3. 安装相关依赖包

    npm install
  4. 运行项目

    npm run dev

    执行结果

    运行vue项目

    打开浏览器,访问 http://localhost:8080/

    vue运行结果

相关问题

参考来源

回复