1. 程式人生 > 其它 >windows下搭建Vue開發環境

windows下搭建Vue開發環境

  一、安裝node.js

  1、根據地址,下載免安裝版本,並解壓如下

https://nodejs.org/en/download/

  

  2、配置變數,先將路徑修改為:D:\workset\feset\nodejs

  1)在D:\workset\feset\nodejs下新建資料夾node_cache和node_global

  2)新建系統變數,並將其新增到PATH下

    a)NODE_PATH:D:\workset\feset\nodejs(任意目錄下可使用npm、node等命令)

    b)NODE_GLOBAL:D:\workset\feset\nodejs\node_global(任意目錄下可使用cnpm、vue等命令)

  3)開啟cmd終端,輸入node -v 和 npm -v 測試變數是否配置成功

  4)設定快取路徑和全域性模組存放路徑

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

  3、安裝淘寶映象cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

  二、安裝vue及命令列工具vue-cli腳手架

cnpm install vue -g
cnpm install vue-cli -g

  三、建立專案

  1、cmd終端進入D:\workset\feset\vue,執行初始化命令,webpack、webpack-simple都是常用模板,根據需要選擇

vue init webpack vueDemo

  2、根據提示選擇需要的安裝項

Project name vuedemo(輸入專案名)
Project description A Vue.js project(輸入專案描述)
Author sl(輸入作者)
Vue build runtime
Install vue-router? No(是否安裝路由)
Use ESLint to lint your code
? Yes(是否安裝ESLint) Pick an ESLint preset none Set up unit tests No(是否安裝unit test) Setup e2e tests with Nightwatch? No(是否安裝e2e test) Should we run `npm install` for you after the project has been created? (recommended) no(是否自動npm install建立專案)

  3、開始安裝並執行

D:\workset\feset\vue>cd vueDemo
D:\workset\feset\vue\vueDemo>npm install
D:\workset\feset\vue\vueDemo>npm run dev

  4、訪問測試,瀏覽器輸入http://localhost:8080/