1. 程式人生 > >Vue.js學習總結(2)——Vue.js2.X + ElementUI開發環境搭建

Vue.js學習總結(2)——Vue.js2.X + ElementUI開發環境搭建

一、開發前準備: Vue專案通常通過webpack工具來構建,而webpack命令的執行是依賴node.js的環境的,所以首先要安裝node.js(官方地址:https://nodejs.org/en/download/) 注意:安裝完node之後,npm包含的很多依賴包是部署在國外的,在天朝,大家都知道下載速度是超級慢啊。所以我們要安裝cnpm,cnpm是淘寶對npm的映象伺服器,這樣依賴的包安裝起來就快多了。 開發前,請先熟悉下面文件 二、根據官方指引,構建專案框架(可以將npm改為cnpm) # 安裝vue$ npm install [email protected]# 全域性安裝 vue-cli$ npm install --global vue-cli# 建立一個基於 webpack 模板的新專案my-project$ vue init webpack my-project# 進入專案目錄
$ cd my-project# 安裝依賴$ npm install# 執行專案$ npm run dev 三、專案環境搭建成功
四、安裝element-ui npm i element-ui -S #也可以直接指定elemengt-ui的版本 $ npm i [email protected] 五、在main.js引入element-ui import Element from 'element-ui' import 'element-ui/lib/theme-default/index.css' Vue.use(Element) 六、建立專案目錄,開發自己的專案頁面

相關推薦

Vue.js學習總結2——Vue.js2.X + ElementUI開發環境搭建

一、開發前準備: Vue專案通常通過webpack工具來構建,而webpack命令的執行是依賴node.js的環境的,所以首先要安裝node.js。(官方地址:https://nodejs.org/e

Vue.js學習總結一.

1、什麼是Vue.js: Vue.js是一套構建使用者介面的漸進式框架。  Vue的核心庫只關注檢視層  Vue.js的目標是通過儘可能簡單的API實現響應的資料繫結和組合的檢視元件 2、單頁應用程式(SPA)    單頁應用一般指的就是一個頁面就是應用,當然也可以是一個子應用。 3、Vue.js為什麼

vue.js學習筆記--父子元件通訊總結

部落格地址:https://fisher-zh.github.io 在使用Vue的過程中,如果需要進行父子元件間的通訊,通過查閱官方文件 我們可以瞭解到只需要在子元件要顯式地用 props選項宣告它期待獲得的資料,同時在其使用過程中傳入相應的資料即可,例如: Vu

Vue.js學習筆記

head 改變 vue ntb con UNC 關註 tle element Vue.js不支持IE8及以下的版本,因為vue使用了IE8無法模擬的ECMAScript5的特性,它支持所有兼容ECMAScript5的瀏覽器。 1 <!DOCTYPE html>

vue.js學習筆記--外掛

在日常的專案中,如果我們需要頻繁的使用某些功能,那麼最好的辦法就是將這個功能封裝成函式來使用。在vue中,我們同樣也會經常將常用的元件分離出來,這樣既便於我們的使用,同時也便於之後的維護。 同樣,當某個元件在許多專案中都要頻繁的使用,那麼我們可以將其寫成一個外掛,vue官方的文件中也

vue.js學習筆記--利用v-model實現父子元件間的雙向通訊

部落格:https://fisher-zh.github.io/ 在Vue中,我們可以使用prop屬性來進行父子元件間的通訊,在之前的文章Vue踩坑之路–父子元件通訊總結中有介紹過。 但是prop 是單向繫結的,我們無法在元件中直接修改prop傳遞的屬性。

vue.js學習筆記--axios中取消請求

部落格:https://fisher-zh.github.io/ 在平時的開發過程中,我們會經常遇到選單切換的問題,在一些切換頻率較低的情況下,在切換到另一個頁面的時候,上一個頁面基本沒有未完成的非同步請求,即時有,在一些情況下也是可以忽略的。但是,在一些切換頻率較高的

vue.js學習筆記--變化檢測問題

部落格地址:https://fisher-zh.github.io Vue追蹤變化是通過把一個普通 JavaScript 物件傳給 Vue 例項的 data 選項,Vue將遍歷此物件所有的屬性,並使用 Object.defineProperty 把這些屬性全部轉為 g

vue.js學習筆記--指令的使用

部落格地址:https://fisher-zh.github.io vue之實現列表的新增點選。 使用指令:v-on v-for v-on v-bind v-model html <!DOCTYPE html> <html lang="en"&

Vue.js 學習筆記1Centos環境下部署開發環境

1.安裝JS依賴管理工具npm yum install npm 2. 安裝vue npm install vue 3. 安裝vue命令列工具CLI sudo npm install --global vue-cli 4. 初始化專案 vue init webpack ne

Vue.js知識總結

Vue.js框架是什麼以及核心內容 Vue.js(讀音 /vjuː/,類似於 view) 是一套構建使用者介面的漸進式框架。與其他重量級框架不同的是,Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注檢視層,它不僅易於上手,還便於與第三方庫

Vue.js學習筆記--------簡介

1.什麼是Vue? Vue (讀音 /vjuː/,類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是,Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層,不僅易於上手,還便於與第三方庫或既有專案整合。另一方面,當與現代化的工具鏈以

vue.js學習筆記

最近在通過vue.js的官網學習其框架,我將會把我在學習過程中遇到的錯誤和自己的收貨分享出來,希望與大家共勉。 html程式碼: <!DOCTYPE html> <html lang="en"> <head>

Spring學習總結2- AOP

服務 win align schema 可重用性 ext 4.0 art 屬性表 一,什麽是AOP AOP(Aspect Oriented Programming)意為:面向切面編程,通過預編譯方式和運行期動態代理實現程序功能的統一維護的一種技術。AOP是OOP的延續,

【數據結構】ArrayList原理及實現學習總結2

!= 需要 但是 object count def 原理 arrays 位置 ArrayList是一個基於數組實現的鏈表(List),這一點可以從源碼中看出: transient Object[] elementData; // non-private to si

OpenCV學習總結2- 視覺系統的構成要素

mic clas 學習 family 描述 計算機 opencv ati enc 相機將光源中的場景轉換成圖像,計算機視覺系統對圖像進行描述。 照明設備:光源成像設備:相機處理設備:主機算法軟件:視覺處理系統OpenCV學習總結(2)- 視覺系統的構成要素

Node.js學習筆記2:基本模塊

依次 常用模塊 nbsp 兩個 避免 ESS 第三方 text 編程 Node.js學習筆記(2):基本模塊 模塊 引入模塊   為了編寫可維護的代碼,我們把很多函數分組,分別放到不同的文件裏,這樣,每個文件包含的代碼就相對較少,很多編程語言都采用這種組織代碼的方式。在No

Spring-batch學習總結2—Job,Flow創建及應用,多線程並發,決策器,監聽器,參數

class getname current ces 表達式 .get been ant string 一.Job的創建及其應用1.Job flow的介紹:(1)狀態機:例完成step1,是否繼續完成step2,step3,我們就需要通過Job flow來控制(2)進行演示:

事務學習總結2——spring事務

一、spring事務:       spring針對事務的解決方案,在基礎的隔離性基礎上,又增加了事務傳播行為、只讀事務、事務超時的機制。 二、事務傳播:       其實就是兩個事務傳播。     &n

《實戰Java高併發程式設計》學習總結2

第3章  JDK併發包 1 synchronized的功能擴充套件:重入鎖。使用java.util.concurrent.locks.ReentrantLock類來實現。 import java.util.concurrent.locks.ReentrantLock; publi