VUE學習之腳手架（vue-cli）

簡單介紹下VUE

1. Vue (讀音 /vjuː/，相似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不一樣的是，Vue 被設計爲能夠自底向上逐層應用。Vue 的核心庫只關注視圖層，不只易於上手，還便於與第三方庫或既有項目整合。另外一方面，當與現代化的工具鏈以及各類支持類庫結合使用時，Vue 也徹底可以爲複雜的單頁應用提供驅動。—— 官方
2. Vue是MVVM結構的，即model-view-viewmodel：數據影響試圖，一樣視圖也能夠影響數據

瞭解vue-cli

1. 官方如是說：Vue 提供了一個官方的 CLI，爲單頁面應用 (SPA) 快速搭建繁雜的腳手架。CLI 工具假定用戶對 Node.js 和相關構建工具備必定程度的瞭解。
2. 注意：假如你是新手，咱們強烈建議先在不用構建工具的狀況下通讀指南，在熟悉 Vue 自己以後再使用 CLI。

如今就假設已經不是新手，來搭建腳手架吧！

安裝node.js

從node官網下載最新的node.js

這裏有兩個版本：LTS和Current，通常咱們會選擇LTS版本

LTS：長期支持版，成熟可靠

Current：穩定版，最新特性

而後點擊安裝node.js，安裝完成以後查看安裝的版本號，在命令窗口輸入

$ node -v 
複製代碼

咱們須要用到的npm（node package manager）是集成在node中的，查看npm的版本信息能夠在命令窗口輸入

$ npm -v 
複製代碼

安裝淘寶鏡像

由於npm安裝插件是從國外服務器下載，受網絡影響大，可能出現異常，因此淘寶團隊推出了淘寶鏡像cnpm代替官方版本

安裝cnpm：在命令窗口輸入

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
複製代碼

而後等待安裝完成，查看cnpm的版本信息能夠在命令窗口輸入

$ cnpm -v
複製代碼

成功安裝cnpm以後，只要是用npm命令的時候改成cnpm便可

安裝VUE

官方：在用 Vue 構建大型應用時推薦使用 NPM 安裝。NPM 能很好地和諸如 webpack 或 Browserify 模塊打包器配合使用。同時 Vue 也提供配套工具來開發單文件組件。

只要在命令窗口輸入安裝命令便可

$ cnpm install vue
複製代碼

查看安裝版本信息

$ vue -V
或
$ vue --version
複製代碼

安裝vue-cli

全局安裝

$ cnpm install --global vue-cli
複製代碼

建立webpack項目

首先咱們要選定好目錄，而後在命令行中把目錄轉到選定的目錄，初始化項目

# my-project爲項目名稱，能夠自定義
$ vue init webpack my-project
複製代碼

初始化時會有一些選項，按照本身的項目選擇便可

Project name (my-project) #項目名稱

Project description (A Vue.js project) #項目描述一個Vue.js 項目

Author (zuozhe) #做者

Vue build

Vue build (standalone)

Install vue-router? (Y/n) #是否安裝Vue路由，也就是之後是spa（但頁面應用須要的模塊）

Use ESLint to lint your code? (Y/n) #使用 ESLint 到你的代碼？ （Y [ yes ] / N [ no ]）

Pick an ESLint preset (Use arrow keys) #選擇一個預置ESLint（使用箭頭鍵）

Setup unit tests (Y/n) #設置單元測？ （Y/ N）

Pick a test runner

Setup e2e tests with Nightwatch? (Y/n) #設置端到端測試，Nightwatch？ （Y/ N）

Should we run "npm install" for you after the project has been created? #建立項目以後咱們是否能夠經過「npm install」來運行

安裝項目依賴

進入項目

$ cd my-project
複製代碼

安裝依賴

$ npm install
複製代碼

啓動項目

$ npm run dev
複製代碼

如上圖表示啓動成功，在瀏覽器的地址欄輸入圖上地址 http://localhost:8088，顯示以下頁面即表示配置成功，項目能夠進行開發了