Vue入坑教程（一）——搭建vue-cli腳手架

1. Vue簡介

詳細內容能夠參考官網Vue.js

1）兼容性

Vue 不支持 IE8 及如下版本，由於 Vue 使用了 IE8 沒法模擬的 ECMAScript 5 特性。但它支持全部兼容 ECMAScript 5 的瀏覽器。

目前ECMAScript 6已經漸漸流行起來，可是有一些瀏覽器還不徹底支持，因此在使用ECMAScript 6時，能夠經過Babel轉碼器進行轉換

2）使用方式

（1） 直接用<script>引入

直接在html頁面中引入<script>，Vue 會被註冊爲一個全局變量。

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

這個適合單獨的H5頁面的使用

（2）命令行工具vue-cli

適合構建大型應用，配合npm，npm能很好的和webpack等模塊打包器配合使用。

# 全局安裝vue最新版
$ npm install vue

2. 環境搭建

1）安裝node.js

傻瓜式安裝，官網下載node.js，一路點擊下一步安裝。

打開命令行工具，輸入node -v，若是顯示node 版本號，則表示安裝成功。

注意：官網安裝的node.js後，就已經自帶包管理工具npm

2）安裝淘寶鏡像cnpm或是yarn

緣由：這一步也能夠省略，安裝的理由是npm的服務器是外國，有時候咱們安裝依賴執行的操做超級慢，而cnpm 或是 yarn執行的速度較快，特別是在執行npm indstall時，淘寶鏡像cnpm install和yarn相對比較明顯的快。

淘寶鏡像安裝：
打開命令行工具，輸入

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

安裝完後，經過cnpm -v查看版本號來判斷是否安裝成功

yarn
參考官網教程yarn 安裝

注意：推薦使用淘寶鏡像或是yarn，接下來下面都是用淘寶鏡像執行的。

3）全局安裝vue-cli

# 全局安裝
cnpm install -g vue-cli

一樣經過命令行工具使用vue -V 查看版本號判斷是否安裝成功

3. 構建項目

1）初始化一個項目

在一個文件夾下面初始化來新建一個工程項目，推薦使用git自帶Git Bash Here

# vue init 是vue初始化項目
# webpack 是打包工具，其中也可使用Browserify，感興趣能夠自行研究
# project 是自定義的項目名稱
vue init webpack project

命令執行以後，會在當前目錄下生成一個以project命名的項目文件夾。

命令執行時會顯示下列選項：

$ vue init webpack project--------------------- 安裝vue腳手架的命令，採用webpack打包工具，項目名是project
This will install Vue 2.x version of the template. ---------------------這裏說明將要建立一個vue 2.x版本的項目
For Vue 1.x use: vue init webpack#1.0 project
? Project name (project) ---------------------項目名稱
? Project name project
? Project description (A Vue.js project) ---------------------項目描述
? Project description A Vue.js project
? Author wujy--------------------- 項目建立者
? Author wujy
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) --------------------- 是否安裝Vue路由，推薦安裝，是頁面跳轉用的
? 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) n  ----------------是否安裝單元測試，因人而異，能夠自行選擇
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? (Y/n) n  --------------------是否安裝e2e測試，可自行選擇
? Setup e2e tests with Nightwatch? No
vue-cli · Generated "project".
To get started: --------------------- 這裏說明如何啓動這個服務
cd project   --------------------進入項目文件夾
npm install   ---------------------安裝依賴，推薦使用淘寶鏡像cnpm
npm run dev  -----------------------項目運行

2）運行項目

執行上述操做以後，能夠看到本地多了一個project文件夾

# 運行項目
cd project  ------------進入工程目錄
cnpm install  -------------安裝依賴，若是要具體安裝其餘模塊能夠單獨使用，具體之後講
# 執行以後，目錄裏多了一個node_modules文件夾，這裏放的就是全部依賴的模塊
cnpm run dev   ------------運行項目
# 打包工做，用於正式環境
cnpm run build

本地localhost:8080就能夠打開一個HelloWorld.vue，默認服務器啓動的是8080端口，固然也能夠經過更改配置來修改默認端口

4. 文件目錄分析

build   -------------------項目構建相關代碼（webpack配置）
    build.js  -------------生產環境構建代碼
    check-versions.js  ----檢查node、npm等版本
    utils.js  -------------構建工具相關
    vue-loader.conf.js  ----css加載器的配置
    webpack.base.conf.js  ---webpack的基礎配置信息
    webpack.dev.conf.js  ----webpack開發環境配置信息，構建開發本地服務器
    webpack.prod.conf.js  ---wenpack生產環境配置信息
config  -------------------配置目錄，包括端口號，打包輸出等的vue基本配置文件
    dev.env.js  -----------開發環境變量
    prod.env.js -----------生產環境變量
    index.js  -------------項目的配置變量，端口號等 
node_modules    -----------加載的項目依賴模塊
static  -------------------靜態資源目錄
index.html  ---------------首頁的入口文件，能夠添加meta等參數
README.md   ---------------項目的說明文檔，makedown格式
src -----------------------源碼目錄，主要的開發
    assets  ---------------靜態資源，css,image等能夠存放
    components  -----------公共組件
    router  ---------------路由文件夾，配置頁面跳轉
    views  ----------------頁面編寫的地方，（能夠自行定義命名）
main.js  ------------------入口文件，全局的配置和加載
.babelrc  -----------------ES6語法編譯配置，用來將es6代碼轉換成瀏覽器可識別的es5代碼
.gitignore  ---------------git上傳須要忽略的文件的格式
package.json  -------------項目的基本信息，包括開發所須要的模塊、項目名稱、版本號等
.postcssrc.js  ------------轉換css的工具
.editorconfig  ------------定義代碼格式

綜上所述：
詳細文件的分析能夠參考官網vue.js
初次嘗試vue，能夠用普通的引入javascript文件的方法。若是有必定的基礎，能夠用vue-cli腳手架進行進階的操做