- 综合排序
- 最热优先
- 最新优先
- 来自专栏大前端666
Vue实战系列—如何细化Vue项目目录设计（2）
通过上一篇文章我们了解了Vue项目核心文件（src）以及在内的各个文件的职能。 接下来我们进一步细化Vue项目的目录设计： 在开发项目的时候前端避免不了请求后端接口。 综合以上，我们将目录设计为： 2-1.png 如图所示， data：用来模拟我们请求的数据内部主要存放json数据格式的数据，比如评价，商品等 。 components：Vue组件。 header：注意这里是一个文件夹。 Hearder.Vue： 头部组件。 router：路由配置文件夹。 app.Vue 根组件。
74720发布于 2019-06-17 - 来自专栏thinkphp+vue
用 vite 2 平滑升级 vue 2 + webpack 项目实战
Webpack 完整迁移实战 Vite vs. 等部署环节，可能需要关心相关 node 软件包的升级 package.json 依赖 "devDependencies": { "vite": "^2.8.2", "vite-plugin-vue2 /css/nav-common.css', } }; 复制代码 vite.config.js 基本结构 import {createVuePlugin} from 'vite-plugin-vue2 ({ base: `/${config.base}/`, logLevel: 'info', // 插件，兼容 rollup plugins: [ // vue2 versions', 'not ie <= 10'] }), ] 复制代码 legecy后全局 css 失效 vue 2 中，build.cssCodeSplit: false 加上 legecy 将导致全局样式丢失等问题
1.9K70编辑于 2022-03-10 - 来自专栏不止是前端
Vue:基于Vue2的饿了么实战总结
前言 某课上有Vue前端饿了么实战项目，这个练习对于初学者来说再好不过了，美中不足的是，尽管该项目录制时间很新，16年11月份录制，然而当时Vue版本仍然停留在1.0，目前最新的版本已经更新到2.1.8 虽然官方已经宣布不再维护了，但是2.x版本依然得到很好的支持，this. v-el去获取DOM元素，2.x统一为ref，如果绑定的是html标签则获得的是DOM对象，是组件则获得组件实例 $dispatch的移除 老师在写小球动画的时候，用了事件派发去通知兄弟组件，2. 那么这个实战项目可能并不适合你。 你还是需要深入学习javascript，然后再学习Vue的官方文档。总而言之，这个实战项目并不适合纯新手。 当然，如果你学习完整个项目以后，并且了解每一个模块的运行机制。
1.3K70发布于 2018-05-10 - 来自专栏趣谈前端
2年vue项目实战经验汇总
', done: true }, { id: 2, text: '... UI框架 elementUI iview Mint UI 基于 Vue.js 的移动端组件库 Vant 有赞团队的移动端组件库 社区组件 Vuetable-2 基于vue的强大的表格组件 vue-fa vue-social-sharing vue社区分享组件 vue-qrcode-reader 一组用于检测和解码二维码的Vue.js组件 vue-clipboard2 基于vue的剪切板组件 cool-emoji-picker 2. vue项目配置经验总结 在讲完vue项目经验之后，为了让大家能独立负责一个项目，我们还需要知道从0开始搭建项目的步骤，以及通过项目实际情况，自己配置一个符合的项目框架，比如有些公司会采用vue+element 最后 如果想学习更多H5游戏, webpack，node，gulp，css3，javascript，nodeJS，canvas数据可视化等前端知识和实战，欢迎在公号《趣谈前端》加入我们一起学习讨论，共同探索前端的边界
1.9K31发布于 2020-02-19 - 来自专栏晓月寒·
vue实战-换皮肤2（使用less实现）
在项目的main.js中的methods下新增_getLess方法用来根据当前所选皮肤获取样式文件，但是需要使用到mixin： Vue.mixin({ computed: { . 在vuex中加入方法用于存储当前皮肤信息： export default { state: { templates: "2", }, getters: {
1.3K20发布于 2019-05-22 - 来自专栏地方网络工作室的专栏
Vue2+VueRouter2+webpack 构建项目实战（五）配置子路由
Vue2+VueRouter2+webpack 构建项目实战（五）配置子路由 2017年8月补充 2016年，我写了一系列的 VUE 入门教程，当时写这一系列博文的时候，我也只是一个菜鸟，甚至在写的过程中关闭了代码审查 本来写这一系列的博文只是为了给自己看的，但没想到的是，这系列博文的点击量超过了2万以上，搜索引擎的排名也是非常理想，这让我诚惶诚恐，生怕我写的博文有所纰漏，误人子弟。 以下为原文 前情回顾 《Vue2+VueRouter2+webpack 构建项目实战（一）准备工作》 《Vue2+VueRouter2+webpack 构建项目实战（二）目录以及文件结构》 《Vue2+ VueRouter2+webpack 构建项目实战（三）配置路由，整俩页面先》 《Vue2+VueRouter2+webpack 构建项目实战（四）接通api，先渲染个列表》 前言 通过前面几章的实战， 新建子页面 我们在src/page文件夹下新建文件夹user，然后在里面新建三个文件index.vue，info.vue和love.vue。
58620编辑于 2022-05-05 - 来自专栏地方网络工作室的专栏
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（七）初识 *.vue 文件
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（七）初识 *.vue 文件 前情回顾 在上一篇文章《Vue2+VueRouter2+Webpack+Axios 构建项目实战 什么是 *.vue 文件 首先，我们用 vue-cli 脚手架搭建的项目，里面我们已经遇到了很多，如 index.vue 或者 App.vue 这一的文件了。这到底是个什么东西？ 如果是初次接触 vue 开发的同学，可能之前没有见过这个东西。 *.vue 文件，是一个自定义的文件类型，用类 HTML 语法描述一个 Vue 组件。 template 部分 以下，我不再称呼它为 *.vue 文件了。改成为 vue 组件。 首先，一个 vue 组件，他的 template 则代表它的 html 结构，相信大家可以理解了。 我个人不喜欢注意，在 vue1.x 中，也是不需要这样的。但是不清楚出于什么原因，vue2.x 开始，就必须这样去写。龟腚就是龟腚，我们按照这样的标准去写就可以了。
77760发布于 2018-01-08 - 来自专栏地方网络工作室的专栏
Vue2+VueRouter2+webpack 构建项目实战（一）准备工作
Vue2+VueRouter2+webpack 构建项目实战（一）准备工作 2017年8月补充 2016年，我写了一系列的 VUE 入门教程，当时写这一系列博文的时候，我也只是一个菜鸟，甚至在写的过程中关闭了代码审查 以下为原文 目录索引 《Vue2+VueRouter2+webpack 构建项目实战（一）准备工作》 《Vue2+VueRouter2+webpack 构建项目实战（二）目录以及文件结构》 《Vue2+ VueRouter2+webpack 构建项目实战（三）配置路由，整俩页面先》 《Vue2+VueRouter2+webpack 构建项目实战（四）接通api，先渲染个列表》 《Vue2+VueRouter2 +webpack 构建项目实战（五）配置子路由》 《Vue2+VueRouter2+webpack 构建项目实战（六）修复代码并通过验证，另发布代码》 之前写的博客没有采用打包工具，而是直接引用js的方式来做的 通过几个月的学习和实战，基本厘清了Vue1 + VueRouter1 + browserify的一些技术点。并且通过几个实际项目的工作，已经验证了自己利用该技术完成项目是没有问题的了。
41220编辑于 2022-05-05 - 来自专栏web前端教室
《vue+vant+node+mongoDB+koa2》电商项目实战连载（2）
-- 第二节，引入vant组件库 --> 其实vue的组件库很多， 之前咱们讲过一个饿了么团队出的一个组件库 elementUI； 今次咱们用有赞团队出的组件库，Vant <! -- 轻量、可靠的移动端 Vue 组件库 --> https://youzan.github.io/vant/#/zh-CN/intro， 使用组件库，节省开发时间、成本， 特性 50+ 个经过有赞线上业务检验的组件 babel-plugin-import --save-dev 打开 项目根目录的 .babelrc 文件， 可以按需要引入 组件模块，现在是很主流的引入 方式， "plugins": [ "transform-vue-jsx
70030发布于 2018-12-07 - 来自专栏地方网络工作室的专栏
Vue2+VueRouter2+webpack 构建项目实战（二）目录以及文件结构
Vue2+VueRouter2+webpack 构建项目实战（二）目录以及文件结构 2017年8月补充 2016年，我写了一系列的 VUE 入门教程，当时写这一系列博文的时候，我也只是一个菜鸟，甚至在写的过程中关闭了代码审查 再者，这一年的发展，VUE 项目快速迭代，看着我一年前写的博文，很可能各种提示已经发生改变，对照着过时的资料，非常可能导致新手在学习的过程中产生不必要的困扰。 以下为原文 目录索引 《Vue2+VueRouter2+webpack 构建项目实战（一）准备工作》 《Vue2+VueRouter2+webpack 构建项目实战（二）目录以及文件结构》 《Vue2+ VueRouter2+webpack 构建项目实战（三）配置路由，整俩页面先》 《Vue2+VueRouter2+webpack 构建项目实战（四）接通api，先渲染个列表》 《Vue2+VueRouter2 +webpack 构建项目实战（五）配置子路由》 通过上一篇博文《Vue2+VueRouter2+webpack 构建项目实战（一）准备工作》，我们已经新建好了一个基于vue+webpack的项目。
41410编辑于 2022-05-05 - 来自专栏一尾流莺学前端
【实战记录】WebSocket在vue2中的使用
2 - 表示连接正在进行关闭。 3 - 表示连接已经关闭或者连接不能打开。 function (data) { console.log(data); }); }); 如果需要提交事件,使用 io.emit socket.emit("show",args); 如何在vue 中使用socket.io 首先安装依赖 npm i vue-socket.io --save npm i socket.io-client --save 然后在 main.js 中注册 为了防止打开客户端默认连接服务器 ,我们这里设置 autoConnect: false //引入依赖 import SocketIO from "vue-socket.io"; import ClientSocketIO from "socket.io-client "; import Vue from "vue"; Vue.use( new SocketIO({ debug: false,//开启调试模式 connection: ClientSocketIO.connect
4.9K20编辑于 2022-12-10 - 来自专栏Hammer随笔
Vue 组件实战
var _this = this console.log('执行了',_this) var datalist2 return item.indexOf(_this.myText) > -1 }) return datalist2 "></script> </head> <body>
<child1></child1> <child2></child2></body> <script> var bus=new Vue() //new一个vue的实例，就是中央事件总线 Vue.component('child1', { template: $refs.mytext.value) //发布消息，名字跟订阅消息名一致 } } }) Vue.component('child2', {1.2K30编辑于 2022-05-09 - 来自专栏郭少华
Vue实战开发
Vue-cli搭建开发环境 1.安装vue-cli脚手架 mpm install vue-cli -g 2.初始化项目 vue init webpack AwesomePos 3.修改index.html 在src/components/目录下新建Fwsb.vue文件。 import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld ' import Fwsb from '@/components/Fwsb' Vue.use(Router) export default new Router({ routes: [ <link rel="stylesheet" href="http:////at.alicdn.com/t/font_681056_c<em>2</em>x5ok<em>2</em>j659ltyb9.css"> 图标顺利引入到项目中，已经可以使用它们了
90920发布于 2018-09-11 - 来自专栏雪胖纸的玩蛇日常
vue学习（2）
2.打开cmd，cd到lesson2文件夹下，执行命令：npm init 进行npm初始化。 2.cmd到项目目录下，然后执行 npm install 这样就会将vue项目的依赖包全都下载安装下来 "devDependencies": { "autoprefixer": "^6.4.0" 3.vue第一个案例 1.下载vue.js开发者版本，下载页面的链接：https://cn.vuejs.org/v2/guide/installation.html 2.新建lesson3目录，在目录下新建 css目录、js目录、images目录、index.html文件，将vue.js放到js目录下 3.在index.html中使用vue.js <! "></script> <script> //1.创建vue实例化对象 //参数 var app= new Vue({
47820发布于 2018-08-16 - 来自专栏睡不着所以学编程
Vue笔记(2)
否则会编译错误,可能是版本不同的原因 数组语法用得很少,所以就简单带过一下: 计算属性 当我们想对某一些数据进行处理以后再进行展示 比如: 但是都略显复杂,或者不够简洁明了,因此我们可以使用vue 调用的函数不加括号: 正常执行 二:事件需要参数,且要求打印形参 调用的函数加上括号且传入参数: 正常执行函数 调用函数时加上括号但是未传参数: 结果为undefined 调用函数时省略括号: vue 按照我们以前学习过的知识,我们可知事件会冒泡,所以当我们点击了按钮时,会先打印出buttonClick,然后再打印出divClick 我们过去是用stopPropagation()来阻止事件冒泡,但是vue
30810编辑于 2022-09-20 - 来自专栏大数据学习笔记
VUE实例2
VUE实例2 <! DOCTYPE html> <html> <head> <title>Vue Demo</title> <script src="https://vuejs.org/js/<em>vue</em>.min.js -- 数据绑定从<em>vue</em>实例传送数据到DOM， 而v-model语法糖实现了<em>vue</em>数据反向传输，DOM(input标签)——><em>VUE</em> --> <input type="number" 对象 var myVue = new Vue({ //el是Vue的保留字，用来指定实例化的DOM的ID号 el:'#firstVue', //#是标签选择器，选择ID 实例里的局部变量 this.total += this.step if(this.total%2==0){ this.show=true }else
43310发布于 2020-11-12 - 来自专栏web全栈
实战：Vue全家桶+SSR+Koa2实现美团网
项目演示地址 高仿美团网 源码下载 码云 项目介绍 前端 ：Nuxt.js/vue-router/ Vuex/ ELement-ui 后端 ：Node.js/Koa2/Koa-router/Nodemailer 节省网络请求 2. 语义化 3. DOM最简化 遇到的问题： 1. 在做Vue项目时使用setTimeout,在里面调用this.add()方法，报错this.add 不是一个函数使用settimeout时，此时的this指向window，为什么this指向会变呢？ cd 到项目根目录 pm2 pm2.json启动项目 发现在服务器本地已经启动了 http://localhost:3000 但是没有在外网映射出去，所有使用域名无法访问 使用Nginx配置映射 PM2部署安装：https://www.cnblogs.com/pzj1023/p/11743480.html
1.5K40编辑于 2022-09-24 - 来自专栏全栈前端精选
Vue3 + Vite2 项目实战复盘总结（干货！）
vue3 项目开发 get 到的知识 刚开始用的时候，可怀念 vue2 了，我始终 get 不到 vue3 的精华，也理解不了网上说的组合式API 有多好。 vue2 我是轻车熟路，vue3 我是面向文档开发。选择了用 vue3，就要去 get 他的精华，用着用着我发现真香，vue3 和 vite2 结合的项目惊讶到我了。 后来使用 vue-virtual-scroller 解决问题，但在网上看到大部分都是vue2版本的，vue3 版本都是在 issues 里面找到的。 总结 以上就我个人这次项目实战的经验而言，在用新的 API 的时候，需要思考一个问题，逻辑点聚合，同时也要注意转变代码组织思维。 2的思维写Vue 3了[18] vue3 源码解析[19] References [1] 什么是组合式 API？
1.6K50发布于 2021-09-03 - 来自专栏前端
Vue3、Vue2
1.API 风格：选项式 vs 组合式总结 选项方和组合式的区别对比维度Vue2 选项式 API Vue3 组合式 API（setup 函数 / setup 语法糖） -- Vue 3 - 标准 setup --><template>
<h2>计数器: {{ count }}</h2>双倍值: {{ doubleCount }}</p 应用初始化方式不同Vue2全局构造函数import Vue from 'vue'import App from '. -- Vue 2 --><template>
<h2 v-if="show">当前计数：{{ count }}</h2> <button @click="count ">销毁组件</button></template>vue2 和 vue3 的初始化总结功能Vue 2 Vue 3 区别说明初始化前 beforeCreate20410编辑于 2025-12-31来自专栏python、mysql、go知识点积累vue2
"gender" value="female" v-model="v2">
性别：{{ v2 }}
<! -- 这里{{v4}}通过数组存取值，选中哪个选项就将其存放到数组中 [ "male", "female", "other" ] -->
vue中各变量的默认值 <script src="<em>vue</em>.js -- 我们在这里引入<em>vue</em>而不是选择在head标签引入<em>vue</em>是因为代码 的加载顺序，如果将其放在head内则会先加载<em>vue</em>，如果在网速较慢时页面的加载速度很慢，如果 将其放在下面，就会先加载body内的内容 时，<em>vue</em>的插值符号与Django的模板语法中的{{}}冲突，这时就需要我们使用分隔符号 为<em>vue</em>重新设置一个插值符，具体设置方法如下。 5, 4, 1]; console.log(arr); // 冒泡排序 // 3, <em>2</em>, 5, 4, 1 // <em>2</em>, 3, 4, 1, 5 // <em>2</em>, 3, 1, 4 // <em>2</em>, 1, 3 //5.9K20发布于 2019-12-20
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号