[vue]webpack&vue组件工程化实践

webpack将app.vue(根节点)挂到html


- 安装
npm i --save-dev [email protected] [email protected]
// vue-loader: 1.解析.vue文件 2.会自动调用 vue-template-complier

- webpack.config.js
{test: /\.vue$/, use: 'vue-loader'},

- app.vue
1.render函数
    app.vue的本质:
        1.一个对象(组件,vNode)
        2,render接收一个组件
        3,render将其渲染成真实dom

<template>
    <div>
        {{msg}}
    </div>
</template>

<script>
    export default {
        data() {
            return {msg: 'maotai22'}
        },
    }
</script>

- main.js
import Vue from 'vue'; // 1,导入的仅是runtime 2, vue = compliler(此处render解决)+runtime
import App from "./App.vue";

new Vue({
    el: "#app",
    render: (h) => h(App)
});

挂载其他组件(vue-router)

思路: 先写2个子组件--注册到app.vue根节点.

- ./components/home.vue
<template>
    <div>主页</div>
</template>

- ./components/list.vue
<template>
    <div>列表页</div>
</template>

- app.vue
<template>
    <div>
        {{msg}}
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        data() {
            return {msg: 'maotai22'}
        },
    }
</script>

- main.js
import Vue from 'vue';
import App from "./App.vue";

// 0,导入路由
import VueRouter from "vue-router";
Vue.use(VueRouter); //将router-view注册为全局组件

//1.导入组件
import home from './components/home.vue';
import list from './components/list.vue';

// 2.写路由
let router = new VueRouter({
    routes: [
        {path: '/home', component: home},
        {path: '/list', component: list},
    ]
});

// 3,注册路由
new Vue({
    el: "#app",
    router,
    render: (h) => h(App) //渲染app.vue组件
});

原文地址:https://www.cnblogs.com/iiiiiher/p/9063270.html

时间: 2024-10-07 18:56:48

[vue]webpack&vue组件工程化实践的相关文章

webpack + react 前端工程化实践和暂不极致优化

技术结构 webpack + react + react-router 功能实现 关于打包 1.基于react-router的自定义打包code split.2.分包异步按需加载.3.CommonsChunkPlugin公共代码打包提取.4.ParallelUglifyPlugin多线程代码压缩.5.HappyPack多线程loader任务处理.6.webpack tree shaking 开发模式 1.express + webpack-dev-middleware + webpack-hot

vue+webpack在“双十一”导购产品的技术实践

双十一中,无线前端的产品可以说非常的丰富.在双十一中,互动始终是重头的一部分,但是与以往不一样的地方是,导购产品在本次双十一中有着不俗的表现.而今年的双11导购业务占据了5大模块里的后三个,除了必抢,其它业务均是由手淘的同学来完成的,笔者作为导购产品的一员,选择导购产品来给大家解读其中的技术实践. 本次双十一的导购产品都有哪些? 看到这些截图,相信很多人都很熟悉,不管是双十一晚会摇一摇摇出的“清单”,还是大家抢完红包迫不及待点开的“我的双十一”,又或者是点开“我的双十一”标签进入的人群会场寻找与

Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信

Vue2.0与 [百度地图] 结合使用: 1.vue init webpack-simple vue-baidu-map 2.下载axios cnpm install axios; 3.在main.js中引入axios,并使用 import axios from 'axios' /* 把axios对象挂到Vue实例上面,其他组件在使用axios的时候直接 this.$http就可以了 */ Vue.prototype.$http = axios; 4.引入百度地图的js秘钥--->最好在inde

Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结

本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用.其实说是多页面应用,实际上在webpack中属于四个app,  如果真是做纯单页面,那应该有二三十个页面吧.所以我这里的多页面应用,是分为四个SPA.比如微信最下面,有四个导航,微信,通讯录,发现,我. 那么这四个导航,就是我的四个SPA,配置多个入口即可. 在这里就不说太多代码了,项目结构将会放

webpack入坑之旅(五)加载vue单文件组件

这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不是开始的开始 webpack入坑之旅(二)loader入门 webpack入坑之旅(三)webpack.config入门 webpack入坑之旅(四)扬帆起航 webpack入坑之旅(五)加载vue单文件组件 webpack入坑之旅(六)配合vue-router实现SPA 需要什么? 在经过前面的四

[转] Vue + Webpack 组件式开发(练习环境)

前言 研究了下别人的 vue 多页面框架, 都是直接复制 package.json 文件,然后在本地 npm install 一下即可, 或者使用官网 vue-cli 工具生成一个项目, 觉得这样虽然看的懂, 但是记不住, 因此有必要从零开始搭建一个使用 .vue 作为组件的项目练习一下, 因此有了这个项目. 既然使用了 .vue 组件, 就不能像之前使用 jQuery 一样把 vue.js 引入页面中, 而是使用配套的 webpack + babel + 各种 loader 工具编译 .vue

Vue&amp;webpack入门实践

目录 1. 下载安装Vue 2. Vue 2.1 Vue要素 2.2 指令 2.3 组件化 2.4 vue-router 3. webpack 3.1 webpack简介 3.2 四个核心概念 3.3 安装 3.4 配置 3.5 执行打包并测试运行 3.6 打包CSS 3.7 快速执行打包命令 3.8 打包html 3.9 热更新 4. Vue-cli 4.1 安装 4.2 文件结构分析 1. 下载安装Vue 先安装好Node.js,因为接下来要使用其中的NPM安装Vue. 建议使用Vscode

vue初学实践之路——vue简单日历组件

---恢复内容开始--- 最近做的项目有一个需求,需要有一个日历组件供预定功能使用,之前的代码过于繁琐复杂,所以我采用vue重写了这个组件. npm.vue等等安装. 只是一个简单的日历组件,所以并不需要用到node服务器,只需要一个Html文件即可. 项目基本目录 首先在引入 vue.js <script src="https://unpkg.com/vue/dist/vue.js"></script> 贴上最主要的html和js代码 <div id=&

Vue父子组件通信实践

组件(Component)是Vue.js的核心部分,组件的作用域是孤立的,所以不能在子组件模板内直接引用父组件的数据,但是组件之间的通信是必不可少的.组件A在其模板中使用了组件B,A组件要向B组件传递数据,B组件要将其内部发生的事情告知A组件,那么A.B组件怎么进行通信呢? Vue.js父子组件的关系可以总结为props down,events up,父组件通过props向下传递数据给子组件,子组件通过events给父组件发送消息,它们的工作方式如下图所示: 父组件 - 子组件:父组件传值给子组