Vue.js是什麼？

Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。

搭建流程

一、利用sublime方式

練習demo時候，可以利用sublime專業前端編輯器來練習，引入vue.js可以通過cdn的方式，也可以直接從專案vue.js所在目錄引入

二、利用npm構建vue專案

1、首先需要下載node，官網https://nodejs.org/en/

我的node版本是v8.9.0,如果下載歷史版本如下連結

https://nodejs.org/dist/v8.11.1/

下載完畢解壓node如下：

最後在cmd驗證

注意我安裝node用了自定義目錄E:\develop\nodejs
需要在環境變數配置如下：

我這裡有2個環境變數，一個是node的安裝目錄，另外一個是後來我安裝vue腳手架時候，需要配置的，如何配置，在如下步驟說明

2、然後安裝vue，參考vue官網

$ npm install vue

如上命令會在我的node的安裝目錄E:\develop\nodejs\node_modules\npm\node_modules生產vue的相關包，目錄截圖省略

繼續看vue官網
Vue 提供一個官方命令列工具，可用於快速搭建大型單頁應用。該工具為現代化的前端開發工作流提供了開箱即用的構建配置。只需幾分鐘即可建立並啟動一個帶熱過載、儲存時靜態檢查以及可用於生產環境的構建配置的專案：

# 全域性安裝 vue-cli
$ npm install --global vue-cli

然後安裝vue全域性腳手架,我這裡是預設給我安裝到c盤下，所以需要在環境變數，設定第一步操作時候，的第二個環境變數，因為後續構建專案時候，需要執行指令，需要vue指令,以下命令是檢視你的腳手架全域性指令目錄npm config get prefix

C:\Users\67334>npm config get prefix
C:\Users\67334\AppData\Roaming\npm
 

如下是我安裝完畢的，vue腳手架的目錄截圖

然後我們簡單測試下，輸入npm init --yes

會在專案目錄下生產如下檔案package.json

{
  "name": "jjj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

然後你還可以安裝、解除安裝我們需要的系列前端框架，比如如下的jquery

還可以安裝制定版本的jquery

以上就是簡單npm使用接下來我們就構建vue工程前端專案

然後就開始構建專案

# 建立一個基於 webpack 模板的新專案
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm run dev

執行npm install下載vue.js整個專案的依賴

最後啟動專案npm run dev，啟動專案執行了專案下package.json檔案如下程式碼

 "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },

最後看下專案結構圖

最後瀏覽器輸出如下：

最後附上一張webpack模板工程圖


基本上就構建完畢，接下來我會繼續更新vue的相關知識點，以及專案執行流程