vue學習筆記（一）

一.搭建環境

1.如果我們的電腦上有了node和npm，我們就只需要執行下面的命令

全域性安裝vue-cli腳手架

npm install -g vue-cli
或者:cnpm install -g vue-cli

2.構建完腳手架之後，隨便進入乙個我們事先準備好的目錄，比如demo目錄，然後在目錄中做初始化操作：

① 進入f盤:

f:② 建立乙個demo資料夾
mkdir demo
③進入demo資料夾
cd demo
④然後再demo資料夾下進行初始化操作
vue init webpack myproject

webpack這個引數是指myproject這個專案將會在開發和完成階段幫你自動打包**，比如js檔案統一合併成乙個檔案，講css檔案統一合壓縮等。

3.然後安裝各種依賴

①進入專案檔案：

cd myproject 
②安裝專案所需要的依賴
npm install
③執行專案
npm run dev
注意：npm install是安裝專案所需要的依賴，簡單的理解就是安裝一些必要的外掛程式。

4.在我們的專案開發完之後，執行npm run build就會編譯我們的源**生成最終的發布**，在dist目錄下。

npm run build

5.下面我們來看看vue都給我們生成了哪些檔案，我們主要關心一下幾個檔案就好了：

①pack.json的儲存的是一些依賴資訊，config儲存的是一些專案中的初始化配置，build裡面儲存的是一些webpack的初始化配置，index.html是我們的首頁，除了這些，關鍵的**都是儲存在src目錄中，開啟build目錄下的webpack.base.conf.js,會看到這樣的一行**。

說明我們的入口js檔案在src目錄下的main.js，接下來我們就分析這些初始化**。

6.跟著**走，先把main.js 中的**貼出來：

// the vue build version

toload
with
the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import vue from
'vue'
import router from
'./router'
vue.config.productiontip = false
/* eslint-disable no-new */
new vue()

先是第一句：

import vue from

'vue'

7.單頁面元件：

src="./assets/logo.png">

router-view>
div>
template>
export default 
script>
style>
8.下面看一下從初始化到頁面展示，vue的頁面架構流程大概是這樣的
Vue學習筆記 一
1 vue基本模型 一段html 配合json，再new 處理vue例項。html json格式的資料 vue.js var vm new vue new vue 2.2.2 v for value in json 2.2.3 v for k,v in json 如果有重複的資料 track by ...
vue 學習筆記（一）
例項生命週期鉤子 1 在beforecreate和created之間，進行資料觀測 data observer 也就是在這個時候開始監控data中的資料變化了，同時初始化事件 2 首先系統會判斷物件中有沒有el選項 有el選項，則繼續編譯過程 沒有el選項，則停止編譯，也意味著暫時停止了生命週期 直...
vue學習筆記（一）
1.vue介紹 vue.js是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，vue 被設計為可以自底向上逐層應用。vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，vue 也完全能夠為複雜的單頁應用提供驅...