windows下搭建VUE開發環境

Vue.js (讀音 /vjuː/，相似於 view)是一套構建用戶界面的 「漸進式框架」。與其餘重量級框架不一樣的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，而且很是容易學習，很是容易與其它庫或已有項目整合。Vue項目一般使用webpack（.vue 文件必須先轉化爲 .js 文件，才能被瀏覽器識別。使用 webpack 是利用 vue-loader 將單文件組件轉化爲 .js 文件）工具來構建，而webpack命令的執行是依賴node.js的環境

1、vue-cli

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

安裝完後，檢查是否安裝成功

開始一個新的Vue項目

# 使用vue-cli初始化項目
vue init webpack vue-d1
vue init webpack-simple vue-d2

# 進入到目錄
cd vue-d1

# 安裝依賴
npm install

# 開始運行
npm run dev

使用webpack或者webpack-simple的區別:

 ?Project name (my-project)                   //請輸入項目名稱，回車默認
 ?Project description (A Vue.js project)      //請輸入項目描述，回車默認
 ?Author h2 <ooxx@qq.com>               //請輸入做者名，回車默認
 ?Vue build                                   //請選擇構建模式，請直接回車選擇第一條
 Runtime + Compiler: recommended for most users
 Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific
HTML) are ONLY allowed in .vue files - render functions are required elsewhere
 ?Install vue-router? Yes                     //是否安裝vue-router,回車
 ?Pick an   ESLint preset (Use arrow keys)   //是否安裝ESLint代碼檢查器(編碼規範)
 Standard (https://github.com/standard/standard)
 Airbnb (https://github.com/airbnb/javascript)
 none (configure it yourself)

  ?Setup unit tests with Karma + Mocha? Yes    //單元測試，懶，不要
  ?Setup e2e tests with Nightwatch? Yes        //端到端測試，懶，不要
----------------------------------

Project name vue-d2
Project description A Vue.js project
Author h2 <ooxx@qq.com>
License MIT
Use sass? No
生成的文件夾：

 

備註

Node-sass is a library that provides binding for Node.js to LibSass, the C version of the popular stylesheet preprocessor, Sass.

It allows you to natively compile .scss files to css at incredible speed and automatically via a connect middleware.

 

2、webpack

先安裝webpack。

cnpm install webpack -g //全局安裝

cnpm install webpack-dev-server -g//安裝調試工具