vue+webpack开发(一)
2023-09-14 09:00:17 时间
一开始接触这个vue+webpack的时候,实在是摸不着头脑,根本无从下手。
但是经过这两天的研究,其实你会发现vue其实并不难,难度都在webpack你对webpack的理解。
webpack顾名思义就是专为web前端打造的打包工具。
一般基本情况下,它会根据你提供的js入口文件,按照里面import(或者require)的内容,生成一个打包好的一个js文件,跟着它会按照你提供的模板生成一个html文件(主要是帮你引入打包好的那个js文件)。
接着你想要用vue来开发,你就尽管在入口文件import vue的库就可以了。
配置好通用的webpack.config后,我们来了解下在webpack项目下怎么使用vue吧:
官方vue上的例子都是正常的html写法:
<script src="vue.js"></script>
而到了webpack项目,我们引入库的方式就是在入口js文件中引入了:
一般vue项目,至少用到vue、vue-router、vue-resource(现在官方推荐用axios)
import Vue from 'vue'; import Router from 'vue-router'; import VueResource from 'vue-resource';
当然我们得先安装好这些前端库:
npm i vue vue-resource vue-router --save //前端要到框架都存在dependencies上
一般来说,我们入口文件不会做过多的开发,所以这里就只创建一个Vue实例,然后把根组件引入渲染:
// 入口js文件 import Vue from 'vue'; import Router from 'vue-router'; import VueResource from 'vue-resource' ; //组件 import App from '@/views/App'; import login from '@/components/login'; //这里正常来说其实是路由的范畴,不应该在这里引入 //Vue.use时在Vue对象注册要使用的全局组件 Vue.use(Router); Vue.use(VueResource); //创建Vue实例 new Vue({ el: '#app', //模板html文件里面写一个div#app来放这个vue实例 router: new Router({ routes: [{path:'/',name:'login',component:login},{...},{...}] }), //路由建议另外开一个文件来写,之后会另开博文介绍 template: '<app />', components: {App} });
App.vue:
<template> <div id="app"> <router-view to="/"></router-view> </div> </template> <script> export default { name: 'App', methods:{ } } </script> <style> </style>
我们给模板html的div#app插入了这个App组件,这个就是我们整个vue项目的根组件了,里面只放了一个router-view (路由插口),是我们上面写的router一对一控制的东西
根据路由配置,每一个url对应着一个组件,然后就会渲染到这个router-view上面。
相关文章
- Vue笔记:安装配置node.js及使用vue-cli创建项目
- vue之cli脚手架安装和webpack-simple模板项目生成
- vue之指令系统
- vue-cli内部webpack的打包优化
- vue+webpack开发(三)
- [Webpack] Externalize Dependencies to be Loaded via CDN with webpack
- vue-cli是什么?和 webpack是什么关系?
- vue.js 3.2.22:多选上传图片带缩略图可删除
- 部署vue.js3.x项目到线上(vue.js 3.2.6/nginx 1.18.0)
- 如何给一个vue项目重命名(vue.js 3.2.4)
- vue-router 快速入门
- webpack配合vue.js实现完整的单页面demo
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器前端源码重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui
- EasyDSS高性能流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载
- 高性能流媒体服务器EasyDSS前端重构(二) webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间
- [Webpack] Externalize Dependencies to be Loaded via CDN with webpack
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- vue.js3: 用crypto-js做sha加密(vue@3.2.37 / crypto-js@4.1.1)
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- [FAQ] Vue iframe 的 src 是链接地址却加载了相对路径 ?
- vue笔记待整理
- vue create 和vue init webpack的区别
- Vue+ElementUI项目使用webpack输出MPA【华为云分享】
- Vue+ElementUI项目使用webpack输出MPA
- vue自定义指令v-scroll(directive)
- 176:vue+openlayers 给feature填充pattern模式颜色
- 009:vue+openlayer加载4种形式高德地图(代码示例)
- vue+webpack+npm搭建的纯前端项目
- 在Vue中如何修改element UI组件的样式(deep 深度选择器)
- 基于Java+SpringBoot+Vue前后端分离农产品物流系统设计与实现(有视频讲解)
- Vue - Webpack的使用、使用Webpack解决相应问题