vue使用webpack/vue-cli脚手架

webpack和vue脚手架

获取原生的DOM的方式***

给标签或者组件  添加ref
<div ref="alex">哈哈哈</div>
<p ref="a"></p>
<Home ref="b"></Home>

this.$refs.alex  获取原始的DOM对象
this.$refs.b	获取的是组件实例化对象

DIY脚手架

• cmd

  module.exports = xxx
  require()
  

• es6module

• // modilejs
  var person = {
      name:"张三",
      fav(){
          alert(1)
      }
  }
  
  var name;
  name = 3;
  export {name}
  
  export var name2 = 34;
  
  export function add(){
      alert(2);
  }
  
  export default person
  

• // main.js
  // as取别名
  import * as a from "./module.js"
  
  console.log(a);
  console.log(a.default.name);
  console.log(a.name);
  console.log(a.name2);
  a.add();
  

webpack模块使用

1. nodejs安装
2. npm init —yes 默认生成一个package.json文件 ( 管理整个项目中的包 )
3. npm run 配置的指令 打包成你想要的.js文件
4. npm i css-loader style-loader -D ( 下载css模块化插件 )
5. npm i html-webpack-plugin -D ( 下载自动帮你生成挂在服务器上的文件 )
6. npm install vue-loader@14.1.1 vue-template-compiler@2.5.17 -D ( 下载解析后缀为.vue文件的插件 和 template编译 )
7. npm i vue vue-router -S( 项目依赖 )
8. npm install webpack-dev-server --save-dev ( 下载前端自己的服务器 )
   

少了Vue.use(VueRouter);

改为用render

vue-cli的使用**

项目的执行顺序

webpack模板的使用

vue init webpack 项目名

element-ui的使用

npm i element-ui -S