用腳手架構建及配置Vue2.0+ElementUI項目

1、下載vscode --強大的前后端開發工具

2、下載nodejs --前端代碼打包編譯專用

3、下載git --強大的代碼托管工具

4、使用npm搭建項目

1. 安裝淘寶鏡像（推薦國內線路，安裝更加穩定，迅速）

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

2. 安裝vue 腳手架（當前最火的MVVM前端架構，國人精心打造，推薦使用）

cnpm i -g vue-cli

3. 安裝webpack

cnpm i -g webpack

4. 創建webpack模板項目

vue init webpack my-project

5. 進入項目，安裝相關依賴，運行項目

cd my-project
cnpm i
cnpm run dev

6. 安裝element-ui（GitHub上最火vue開源項目，餓了么精心打造，推薦使用）

cnpm i -S element-ui

7. 在main.js中引入element-ui

import ElementUI from 'element-ui'
Vue.use(ElementUI)
Vue.prototype.$ele = ElementUI

8. 在HelloWorld.vue的mounted（掛載成功回調）方法中使用element ui

mounted () {
    this.$ele.Message({
      message: '恭喜你，這是一條成功消息！',
      type: 'success'
    })
  }

 

 5、Demo項目GitHub地址

https://github.com/Rhyheart/rhyheart.web.demo.git

 

 6、npm常用指令說明

1. npm install

安裝node_module以及還原package.json內聲明的所有包

2. npm install xxxpackage

安裝xxx包到node_module目錄下，但是不會更新package.json文件，因此另外一個人拉取到代碼后無法使用npm install進行包還原，需要手動指定重裝

3. npm install --save xxxpackage

安裝xxx包到node_module目錄下，同時更新package.json的dependencies（生產/運行環境）配置，運行時如果需要就用這個

4. npm install --save-dev xxxpackage

安裝xxx包到node_module目錄下，同時更新package.json的devDependencies（開發/編譯環境），但是不會更新dependencies（生產/運行環境）配置，僅編譯時需要就用這個

5. npm install --global xxxpackage

安裝xxx包到全局，不同項目之間可以共享該包，就無需每個項目都安裝

6. 簡寫

install可以簡寫為i，例如：npm install 簡寫 npm i

--save可以簡寫為-S，例如：npm install --save xxxpackage 簡寫為 npm i -S xxxpackage

--save-dev可以簡寫為-D，例如：npm install --save-dev xxxpackage 簡寫為 npm i -D xxxpackage

 --global可以簡寫為-g，例如：npm install --global xxxpackage 簡寫為 npm i -g xxxpackage