獲取原生的DOM的方式 **

　　　　　　類似angular的 #xx 唄。。

ref

• 給標籤繫結ref屬性，獲取的是當前DOM物件

• 給元件繫結ref屬性，獲取的是元件例項物件

this.$parent

this.$root   

this.$children

給標籤或者元件 新增ref
<div ref = 'alex'>哈哈哈</div>
<p ref = 'a'></p>
<Home ref = 'b'></Home>

this.$refs.alex  　　獲取原始的DOM物件
this.$refs.b 　　　　獲取的是元件例項化物件
 

DIY腳手架cli

es6module

A模組依賴B模組

//module.js

var person = {
name:'張三',
fav:function () {
alert(1);
}
}
var name;
name = 23;
export {name}

export var num2 = 34;
export function add() {
alert(2)
}

export default person

//main.js
import * as a from './module.js'
//as 起別名

npm 相當於 pip3

是 node package manager

webpack模組使用

1、nodejs 安裝

2、npm init --yes 預設生成一個package.json檔案 （管理整個專案中的包）

webpack（前端中工作 專案上線之前 對整個前端專案優化）

• entry 整個專案的程式入口（main.js或index.js）

• output 輸出的出口

• loader 載入器 對es6程式碼的解析 babel-loader, css-loader 解析css檔案，style-loader 將css程式碼新增一個style標籤插入header標籤中，url-loader\

• plugins html-webpack-plugin 醜陋

使用vue-cli

• 1.電腦上 ，linux unix 等 安裝nodejs，npm 包管理器

• npm install -g @vue/cli  //安裝 是 3.2.1

  //安裝vue-cli 2版本
  npm install -g @vue/cli-init
  # `vue init` 的執行效果將會跟 `vue-cli@2.x` 相同
  vue init webpack  my-project  //生成專案 
  
  //簡單版的 是 vue init webpack-simple xx
  
                      模板的名字  專案名字

  先看清除 你當前終端中的根目錄是哪個，如果不是my-project,一定要切入到當前目錄下，然後再執行npm install

  • 執行專案 npm run dev 　　
    • • 　　　　1、走了package.json
      • 然後找到dev的鍵值對 發現又走了webpack.config.js

element-ui的使用

npm i element-ui -S