5、获取原生的DOM的方式 和Vue-cli

1、获取原生的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 获取的是组件实例化对象

 

2、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