VUE篇 5、获取原的DOM的方式 vue脚手架搭建 饿了么组件安装

获取原生的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模块

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

VUE篇 5、获取原的DOM的方式 vue脚手架搭建 饿了么组件安装

原文：https://www.cnblogs.com/zhuangdd/p/13755261.html