webpack 结合 Vue 使用的总结| 学习笔记

简介: 快速学习 webpack 结合 Vue 使用的总结

开发者学堂课程前端自动化构建工具 Webpackwebpack 结合 Vue 使用的总结】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/587/detail/8230


webpack 结合 Vue 使用的总结


总结梳理 webpack 中如何使用 Vue:

1.webpack中如何让使用vue

(1)安装vue的包:cnpm i vue -s

(2)由于在wepack中,推荐使用.vue这个组件模板,所以,需要安装能解析这种文件的losder cnpm i vue-loader vue-template-complier -D

(3)main.js中,导入vue模块 import Vue fromvue

(4)定义一个.vue结尾的组件,其中组件由三部分组成:

template script style

(5)使用import  login from./login.vue’导入这个组件

(6)创建vm的实例

var vm = new vue({el:’app,rander,render:c=>(login)})

(7)在页面创建一个idappdiv元素,作为我们vn实例要控制的区域。

相关文章
|
1月前
|
JavaScript 前端开发 程序员
|
1月前
|
缓存 JavaScript
|
1月前
|
资源调度 前端开发 JavaScript
vue - ES6模块化、promise、webpack打包(所在在学的朋友们先看这篇,看了不吃亏)...
vue - ES6模块化、promise、webpack打包(所在在学的朋友们先看这篇,看了不吃亏)...
|
2月前
|
缓存 前端开发 API
《Webpack5 核心原理与应用实践》学习笔记-> webpack插件开发基础
《Webpack5 核心原理与应用实践》学习笔记-> webpack插件开发基础
31 0
|
2月前
|
前端开发 JavaScript 测试技术
《Webpack5 核心原理与应用实践》学习笔记-> webpack的loader运行与调试
《Webpack5 核心原理与应用实践》学习笔记-> webpack的loader运行与调试
27 0
|
2月前
|
存储 缓存 JavaScript
《Webpack5 核心原理与应用实践》学习笔记-> webpack的loader开发技巧
《Webpack5 核心原理与应用实践》学习笔记-> webpack的loader开发技巧
35 1
|
2月前
|
缓存 监控 JavaScript
《Webpack5 核心原理与应用实践》学习笔记-> webpack极致性能优化
《Webpack5 核心原理与应用实践》学习笔记-> webpack极致性能优化
28 1
|
2月前
|
前端开发 JavaScript
《Webpack5 核心原理与应用实践》学习笔记-> webpack代码压缩
《Webpack5 核心原理与应用实践》学习笔记-> webpack代码压缩
29 0
|
2月前
|
监控 IDE 开发工具
《Webpack5 核心原理与应用实践》学习笔记-> webpack性能优化技巧
《Webpack5 核心原理与应用实践》学习笔记-> webpack性能优化技巧
41 0
|
2月前
|
JavaScript 前端开发 API
《Webpack5 核心原理与应用实践》学习笔记-> webpack并行构建
《Webpack5 核心原理与应用实践》学习笔记-> webpack并行构建
43 0