五、獲取原生的DOM的方式 和Vue-cli

一、獲取原生的DOM的方式 **

給標籤或組件添加ref屬性

<div ref="luban"></div>
<p></p>
給標籤或者組件 添加ref
<div ref = 'luban'>哈哈哈</div>
<p ref = 'a'></p>
<Home ref = 'b'></Home>

this.$refs.luban  獲取原始的DOM對象
this.$refs.b 獲取的是組件實例化對象

 

二、DIY腳手架

 

webpack是一個現代JavaScript應用程序的靜態模塊打包器。
當webpack處理應用程序時，它會遞歸地構建一個依賴關係圖，
其中包含應用程序須要的每一個模塊，而後將全部這些模塊打包成一個或多個bundle.

 

 

 

 

 

 

 

cmd

module.exports = xxx
require()

 

 

ES6module

//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模塊使用
• nodejs 安裝
• npm init --yes 默認生成一個package.json文件 （管理整個項目中的包）

 

 

2.1vue-cli腳手架的使用

 

 

 

 

 

 

 項目的執行順序：

 

 

 

 

 

2.2webpack模板的使用

webpack(前端中工做 項目上線以前 對整個前端項目優化)

• entry整個項目的程序入口(main.js或index.js)

• output輸出的出口

• loader加載器對es6代碼的解析babel-loader, css-loader解析style標籤插入header標籤中，

  url-loader

• plugins html-webpack-plugin 醜陋

 

使用vue-cli

• 在電腦上，Linux unix等安裝nodejs, npm包管理器

• npm install -g @vue/cli //安裝 版本爲 3.2.1

• // 安裝vue-cli 2版本
  npm install -g @vue/cli-init
  ​
  vue init    webpack    my-project  //生成項目
              模板名字     項目名字

• cd my-project
  npm install
  npm run dev

vue init webpack 項目名

 

 

 

 

 

 

2.3element-ui的使用

npm i element-ui -S