windows下搭建vue環境

1、安裝node.js

1. 下載地址 http://nodejs.cn/download/
2. 下載二進制包 (.zip)須要本身配置環境變量
3. 下載安裝程序 (.msi)，安裝完成自動配置環境變量
4. 利用cmd命令進入安裝路徑檢測是否安裝成功

2、安裝淘寶鏡像cnpm

• npm包含的不少依賴包是部署在國外的，在天朝，你們都知道下載速度是超級慢啊。因此咱們要安裝cnpm，cnpm是淘寶對npm的鏡像服務器，這樣依賴的包安裝起來就快多了。
• 安裝命令爲：npm install -g cnpm --registry=https://registry.npm.taobao.org

3、安裝vue-cli腳手架,用於幫助搭建所需的模板框架

•  vue-cli是vue官方提供的一個命令行工具，可用於快速搭建大型單頁應用。該工具提供開箱即用的構建工具配置，帶來現代化的前端開發流程。只需一分鐘便可啓動帶熱重載、保存時靜態檢查以及可用於生產環境的構建配置的項目。
• 安裝命令爲：cnpm install -g vue-cli
• 如圖輸入vue檢測安裝成功
  

 

4、新建項目

• 找到一個合適的目錄，新建vue項目
• 命令：vue init webpack my-front(項目文件夾名)

• $ vue init webpack my-front 　　-- 這個是那個安裝vue腳手架的命令
  This will install Vue 2.x version of the template. 　　--這裏說明將要建立一個vue 2.x版本的項目
  For Vue 1.x use: vue init webpack#1.0 my-front
  ? Project name (my-front) 　　--項目名稱
  ? Project name my-front
  ? Project description (my-front project) 　　--項目描述
  ? Project description my-front project
  ? Author Louis 　　-- 項目建立者
  ? Author Louis
  ? Vue build (Use arrow keys)
  ? Vue build standalone
  ? Install vue-router? (Y/n) 　　-- 是否安裝Vue路由，也就是之後是spa（但頁面應用須要的模塊）
  ? Install vue-router? Yes
  ? Use ESLint to lint your code? (Y/n) n 　　--是否啓用eslint檢測規則，這裏我的建議選no
  ? Use ESLint to lint your code? No
  ? Setup unit tests with Karma + Mocha? (Y/n)
  ? Setup unit tests with Karma + Mocha? Yes
  ? Setup e2e tests with Nightwatch? (Y/n)
  ? Setup e2e tests with Nightwatch? Yes
  vue-cli · Generated "my-front".
  To get started: 　　-- 這裏說明如何啓動這個服務
  cd my-front
  npm install
  npm run dev

• 項目結構
  
• 目錄說明
  
• 安裝依賴　　執行cnpm install命令
  
• 啓動服務   cnpm run dev