精华内容
下载资源
问答
  • vue项目开发实战案例

    万次阅读 2019-07-22 22:53:34
    今天分享一些vue基础实战例子 实例1: 渲染声明 渲染声明是 vue 的最核心模块。 vue 基于传统的 HTML 模板语法,将 DOM 绑定到 vue 实例上,然后 vue 在底层的实现上,将 模板编译成虚拟 DOM 渲染函数(render ...

    今天分享一些vue基础实战例子

    实例1: 渲染声明

    渲染声明是 vue 的最核心模块。

    vue 基于传统的 HTML 模板语法,将 DOM 绑定到 vue 实例上,然后 vue 在底层的实现上,将 模板编译成虚拟 DOM 渲染函数(render function)。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    </head>
    <body>
    <div id='app'>
    
      <!-- Mustache 标签将会被替代为对应数据对象上 message 属性的值 -->
      {{ message }}
    
      <!-- 如果只想一次性的插值,不想被数据驱动改变,用 v-once -->
      <div v-once>{{ messageForOnce }}</div>
    
      <!-- 也可以渲染模板,用 v-html -->
      <div v-html="messageHtml"></div>
    
    </div>
    </body>
    <script src="../utils/vue.js"></script>
    <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello vue for message!',
        messageForOnce: 'Hello vue for once message',
        messageHtml: '<span style="color: red;"> Hello vue for template render</span>'
      }
    })
    </script>
    </html>
    

    打开浏览器 Console,感受 v-once 的不同

    app.message = 'Hello vue for message, Updated'
    app.messageForOnce = 'Hello vue for once, Updated' // 无效

    指令 (Directives)

    带有 v- 前缀的 v-oncev-htmlv-bindv-onv-if... 称指令。它的作用是当它的值(表达式)改变时,其带来的影响,响应式地作用于 DOM。

    实例2: 属性绑定

    可以将 html 的属性和 数据 进行绑定,动态的更改属性。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    </head>
    <body>
    <div id='app'>
      <span v-bind:title="title">
        这个 DOM 具有动态的 Title
      </span>
      <img v-bind:src="imgUrl"></img>
    </div>
    </body>
    <script src="../utils/vue.js"></script>
    <script>
    // http://o9h4emdrs.bkt.clouddn.com/atomatom-boom2.gif
    var app2 = new Vue({
      el: '#app',
      data: {
        title: 'title-1',
        imgUrl: 'http://o9h4emdrs.bkt.clouddn.com/live.jpg'
      }
    })
    </script>
    </html>
    

    打开浏览器 Console,验证动态的 title

    app2.message = 'title-2'
    app2.imgUrl="http://o9h4emdrs.bkt.clouddn.com/atomatom-boom2.gif"

    指令参数

    在指令名称之后以冒号表示的是指令的参数,一些指令能够接收一个“参数”.

    比如: v-bind:title="title"v-bind:src="imgUrl",这里的 v-bind 指令可以用于响应式地更新 HTML 的特性。

    展开全文
  • Vue前端项目-Vuex实战使用

    千次阅读 2020-06-30 15:26:15
    1、创建 vue-cli 脚手架项目 2、安装 vuex 3.将 store 实例注册到 Vue对象 4. store 实例对象 5、将 store 分割成模块化(Module) 6、项目中的模块化 7. 模块化文件 8. action 中的第一个参数 9. 如何调用 ...

    目录

    1、创建 vue-cli 脚手架项目

    2、安装 vuex

    3.将 store 实例注册到 Vue对象

    4. store 实例对象

     5、将 store 分割成模块化(Module)

    6、项目中的模块化

    7. 模块化文件

    8. action 中的第一个参数

    9. 如何调用 action 中的方法

    10. 项目中是如何 调用 action 中的方法

    11. Getter 获取 store 中存放的数据

     12 项目中getters 使用

     13. mapGetters 辅助函数 获取数据

    14. store.getters方式获取数据


    本章教程会结合 Vue 前端项目 以及 Vuex官网的知识点来介绍,Vuex在实战项目中到底如何使用?

    1、创建 vue-cli 脚手架项目

    因为本章教程只是介绍 Vuex 相关的知识点,所以 vue-cli 脚手架创建项目参考自:

    https://blog.csdn.net/u010559460/article/details/104709597

    2、安装 vuex

    安装过程略,安装结果如图:

    3.将 store 实例注册到 Vue对象

    把 store 对象提供给 “store” 选项,这可以把 store 的实例注入所有的子组件

    4. store 实例对象

    步骤3 将到需要一个 store 实例对象注册到 Vue的属性。

    本步骤将定义一个 全局的 store

    创建 src / store / index.js 文件,内容如图:

     5、将 store 分割成模块化(Module)

    下图来自官网的模块化介绍:

    6、项目中的模块化

    src / store / index.js 文件中

    user 模块 举例,创建 src / store / modules / user.js 文件

    7. 模块化文件

    user 模块 举例,创建 src / store / modules / user.js 文件

    我们在 state 中定义 需要存放在 store 中的数据

    在 mutations 中修改 store 中的数据,但需要注意 mutations 中定义的方法是同步的

     在   actions 中定义异步方法,通常我们会调用这个异步方法获取数据后 再调用 mutations 中的方法将数据存储到 store 中

    8. action 中的第一个参数

    9. 如何调用 action 中的方法

    10. 项目中是如何 调用 action 中的方法

    11. Getter 获取 store 中存放的数据

    官网例子:

     12 项目中getters 使用

     

     13. mapGetters 辅助函数 获取数据

    14. store.getters方式获取数据

     

     

     

    展开全文
  • vue项目实战.rar

    2020-02-29 18:36:43
    这是一个关于Vue实战项目,从https://www.bilibili.com/video/av50680998?p=1视频中进行学习的源代码
  • 本文档为Vue.js项目实战 :源码,代码为:纪尧姆·周(Guillaume Chau) (作者) 周智勋 , 张伟杰 , 孔亚杰 , 李骏 (译者) 所编写的《Vue.js项目实战 》一书全部代码,代码可以自己学习,也可以跟随书籍学习,相对...
  • 从Hello World 开始,以案例的形式深入浅出的讲解Vue.js,最终实现本套课程的学习目标! 本套课程总共分五个章节 第一章讲解Vue的基础知识 通过第一章节可以掌握vue各种指令,比如v-for v-if 等等,掌握vue组件和...
  • 前端vue框架项目实战经验

    千次阅读 2019-01-09 14:13:54
    项目实战经验(基于vue框架) 之所以写这篇文章主要是因为网上很多关于前端知识的基础归类文章,但是实际在项目开发中使用的时候还是不可避免地会踩到一些坑,我只是想把自己踩到过的一些坑分享出来,避免重复掉坑里...

    项目实战经验(基于vue框架)

    之所以写这篇文章主要是因为网上很多关于前端知识的基础归类文章,但是实际在项目开发中使用的时候还是不可避免地会踩到一些坑,我只是想把自己踩到过的一些坑分享出来,避免重复掉坑里- -

    APP部分

    坑点

    • div 背景图片属性引本地文件路径时,路径被替换到static目录下

    解决办法
    使用require(‘’)相对路径引文件

    <li  :style="'background-image:url(require('./../assets/banner_top2.png'))'"></li>
    
    • vux框架 的range组件v-model绑定赋值的时候,会初始化赋值NaN。

    ngnix踩坑记

    • 服务闪退启动不了

    建议去log日志文件下err文件查看报错原因
    conf文件被记事本编辑过,保存成了含BOM头的文件
    使用其他编辑器将文件另存为UTF-8不含Bom头的格式
    注:记事本编辑UTF-8都会加BOM头

    下载一个Nodepad++ 编辑器,将文件格式转换为UTF-8格式,去除BOM头

    小技巧

    • 过滤文件后缀名,将.xxxxx一连串后缀名一起替换为空字符串
    filename.replace(/ \. [^\.]+ /g,  '');
    
    • css中flex布局时,实现水平方向最后一个元素贴近底部,类似垂直方向的align-slef:flex-end效果
    .g-flex-right{
      flex-grow: 1;
      display: flex;
      justify-content: flex-end;
    }
    
    • scope模式下修改UI框架子组件css样式解决方法

    深度作用选择器/deep/

    /deep/.child-component-class{
    	width:100vw;
    	...
    }
    
    • delete删除指定对象键值对

    深度作用选择器/deep/

    person = {age: 20,name: wilson}
    delete person.age // person = {name: wilson}
    
    • webpack编译的时候,通过dll来加快构建速度。

    原理是通过dll先提取公共依赖包下载,避免公共依赖包重复下载。(个人理解)

    • npm run dev 动态构建时内存溢出解决方案:打开node_modules > .bin > webpack-dev-service.cmd文件,添加–max_old_space_size=4096 代码扩展最大内存占据空间。
      文件原代码
    @IF EXIST "%~dp0\node.exe" (
      "%~dp0\node.exe"  "%~dp0\..\_webpack-dev-server@2.11.3@webpack-dev-server\bin\webpack-dev-server.js" %*
    ) ELSE (
      @SETLOCAL
      @SET PATHEXT=%PATHEXT:;.JS;=;%
      node "%~dp0\..\_webpack-dev-server@2.11.3@webpack-dev-server\bin\webpack-dev-server.js" %*
    )
    
    @IF EXIST "%~dp0\node.exe" (
      "%~dp0\node.exe --max_old_space_size=4096"  "%~dp0\..\_webpack-dev-server@2.11.3@webpack-dev-server\bin\webpack-dev-server.js" %*
    ) ELSE (
      @SETLOCAL
      @SET PATHEXT=%PATHEXT:;.JS;=;%
      node --max_old_space_size=4096 "%~dp0\..\_webpack-dev-server@2.11.3@webpack-dev-server\bin\webpack-dev-server.js" %*
    )
    

    未完待续…

    展开全文
  • Vue前端项目实战--移动商城--总结篇

    千次阅读 2021-02-18 18:22:56
    1、在VScode终端用Vue CLI3创建项目 npx vue create jelly-mall 如何安装Vue CLI见我之前的博客: https://blog.csdn.net/Jelly_11/article/details/113389663 注意:项目名称不可以有大写字母。 在这里我只选择...

    该项目为移动商城开发(coderwhy老师的项目),数据来源于蘑菇街,主要是记录自己的开发过程。
    详细代码见我的GitHub:https://github.com/jelly571/jelly-mall

    附上效果图:

    首页:

    一、创建项目(划分目录)

    1、在VScode终端用Vue CLI3创建项目

    npx vue create jelly-mall
    

    如何安装Vue CLI见我之前的博客:
    《Vue CLI 脚手架安装方法以及初始化项目特别慢的解决方法》https://blog.csdn.net/Jelly_11/article/details/113389663

    注意:项目名称不可以有大写字母。

    在这里我只选择了基本的babel,其他的例如vue-router等用到时我再手动安装。

    2、创建好项目后,删除一些默认内容

    • 删掉默认给出的HelloWord.vue和logo.png;
    • 删除App.vue中对HelloWord的引用及组件和样式;
    • 将public文件夹下的浏览器标签图标favicon.ico替换为我们的图标。

    3、划分目录
    根据我们的项目,在src文件夹下新建一些文件夹,如下图:

    • assets中用于存放图片img和样式文件css,css文件夹中有normalize.css文件用来让不同的浏览器在渲染网页元素的时候默认样式更统一(官网下载),reset.css用于去除默认样式(网上可下载,PC端需要,移动端该项目可以不引用该样式),base.css用于存放一些基础的样式。
    • common中存放一些公共的js文件,例如const.js(用来存放常量)和utils.js(用来存放公共函数)等。
    • components中新建common(存放其他项目中也可能会用到的组件)和content(存放本项目中多个页面会用到的组件)文件夹。
    • views文件夹也是用来存放组件.vue的,主要是用来存放每个页面自己的组件,根据我们的商城项目,主要有是4个页面,分别是首页home、分类category、购物车cart、我的profile
    • network中存放网络请求数据的相关代码。
    • router中存放路由相关代码。
    • store中存放vuex相关代码。

    二、创建GitHub仓库

    在github上创建一个仓库,名为jelly-mall,这里不用选择创建README和 .gitignore,因为脚手架为我们创建的项目中已经 有这两个了。

    创建好仓库之后,复制我们的仓库地址,然后回到VScode终端进入本地jelly-mall文件夹。

    依次输入2条命令(第一条命令的网址为刚刚复制的GitHub网址):

    git remote add origin https://github.com/jelly571/jelly-mall.git
    git push -u origin master
    

    注意:电脑上需要提前安装好git,网上有很多教程,安装很简单,这里就不赘述了。

    这样就实现了将本地的项目上传到GitHub上,之后我们每写完一部分功能的代码,就可以使用以下命令将更新的代码上传GitHub。

    git commit -m "添加xxx功能"
    git add .
    git push
    

    如报错:git pull --rebase origin master

    三、配置别名和规范文件

    由于Vue CLI3隐藏了webpack配置文件,我们在根目录下可以创建vue.config.js文件来修改配置,在vue.config.js中写入如下代码,给文件夹路径起别名,主要用于引用时可以简化路径。

    //vue.config.js文件
    
    //@表示src文件夹
    module.exports = {
      configureWebpack: {
        resolve: {
          alias: {
            'assets': '@/assets',
            'common': '@/common',
            'components': '@/components',
            'network': '@/network',
            'views': '@/views' 
          }
        }
      }
    }
    

    创建.editorconfig文件写入一些规范(在Vue CLI2中有的文件,也可直接复制过来)

    root = true
    
    [*]
    charset = utf-8
    indent_style = space
    indent_size = 2
    end_of_line = lf
    insert_final_newline = true
    trim_trailing_whitespace = true
    
    

    四、配置css文件

    1. 在base.css中引用normalize.css和reset.css,在App.vue中引用base.css从而将公共样式与网页构建联系。(index.html
      -> 打包的js文件(main.js作为入口) -> App.vue)
    2. 在base.css文件中写入一些公共样式:
      公共样式变量;
      去除默认样式;
      设置字体、用户选择、去除高亮、字体颜色、宽度等;
      超链接样式;
      解决浮动引起的高度塌陷以及外边距重叠等。
    //App.vue文件
    
    <style>
    @import 'assets/css/base.css';
    </style>
    
    /*引用normalize.css*/
    /*normalize.css对浏览器默认样式进行统一
    reset.css去除浏览器默认样式*/
    @import "./normalize.css";
    @import "./reset.css";
    
    /*配置一些变量,用于样式引用*/
    /*:root -> 伪类选择器:获取根元素html*/
    :root {
      --color-text: #666;
      --color-background: #fff;
      --color-high-text: #6f90fc;
      --color-tint: #8aa5fc;/*背景颜色:导航等*/
      --font-size: 14px;
      --line-height: 1.5;
    }
    
    /*去除默认样式,其实有了reset.css可以省去这一步*/
    *,
    *::before,
    *::after {
      padding: 0;
      margin: 0;
      /*宽度和高度用来设置整个盒子可见框的大小(内容区+内边距+边框)*/
      box-sizing: border-box;
    }
    
    body {
      font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
      user-select: none;/*禁止用户鼠标在页面上选中文字图片等*/
      /*将默认的点击高亮设置为透明*/
      /*webkit是苹果浏览器引擎,tap点击,highlight背景高亮,color颜色用数值调节*/
      -webkit-tab-hightlight-color: transparent;
      color: var(--color-text);
      width: 100vw;/* 100vw一个视口宽度 */
    }
    
    a {
      color: var(--color-text);
      text-decoration: none;/*文本修饰,去掉超链接下划线*/
    }
    
    /*解决浮动引起的高度塌陷
    .clearfix::after {
      content: '';
      display: block;
      clear: both;
      width: 0;
      height: 0;
      visibility: hidden;元素不在页面中显示,但仍占据页面位置
    }*/
    
    /*解决浮动引起的高度塌陷以及外边距重叠*/
    .clearfix::before,
    .clearfix::after {
      content: '';
      display: table;
      clear: both;
    }
    
    /*针对IE低版本浏览器*/
    .clearfix {
      /*zoom的作用是设置或检索对象的缩放比例,
      zoom:1可以在低版本IE下触发IE浏览器的haslayout,
      用于清除浮动,解决margin导致的重叠等问题*/
      zoom: 1;
    }
    
    
    

    五、项目模块划分:tabbar路由映射

    通过TabBar底部标签栏划分出4个页面:首页、分类、购物车、我的,TabBar底部标签栏组件的开发见我的博客:
    《前端开发-移动商城-底部标签栏tabbar组件化封装(可在其他项目中通用)》https://blog.csdn.net/Jelly_11/article/details/113868000

    实现效果

    六、首页开发

    见我的博客《Vue前端项目实战–移动商城–首页开发》https://blog.csdn.net/Jelly_11/article/details/113871367

    (一)顶部导航栏navbar的封装
    (二)网络数据请求
    (三)轮播图
    (四)推荐信息
    (五)商品导航栏tabControl
    (六)商品信息
    (七)better-scroll
    (八)backTop回到顶部
    (九)下拉加载更多
    (十)调better-scroll带来的bug
    (十一)路由切换Home离开时记录状态和位置

    项目正在开发,博客持续更新中……

    接下来内容:

    • 详情页开发
    • npm install vuex --save
    • npm install fastclick --save
    • npm install vue-lazyload --save
    • npm install postcss-px-to-viewport --sav-dev
    展开全文
  • Vue项目实例

    千次阅读 2018-09-12 11:40:50
    链接跳转 &lt;router-link to="/index"&gt;&lt;/router&gt; //属性to='/'即是跳转到path为'/'的路径. &lt;div to="/users" @click="... ratego ()
  • 目录Vue 2.0 一、Vue Cli ...二、项目实战 2.1技术架构 2.2目录部署 2.3路由 2.4 webpack拓展 2.5 vue cli拓展 2.6数据 2.7开发模块顺序 三、Vue 3.1路由守卫 一、Vue Cli 在vue项目中,我...
  • 前端商城vue项目案例1

    千次阅读 2021-01-13 09:37:14
    views/home.vue <template> <div id="home" class="home"> <van-search v-model="value" placeholder="商品搜索 共239款好物" input-align="center"/> <van-swipe :autoplay="3000" style=...
  • Vue常见项目案例

    千次阅读 2019-10-12 15:10:20
    Vue.js 项目案例(不断收集中…) 应用实例 https://github.com/phanan/koel koel-基于网络的个人音频流媒体服务 https://github.com/pagekit/pa… pagekit-轻量级的CMS建站系统 ...
  • vue项目实战

    千次阅读 2020-12-10 23:01:39
    vue项目实战 1.3 电商后台管理系统的开发模式(前后端分离) 后端负责写接口,管理数据库 前端负责调接口(基于vue技术栈,ajax) 1.4 电商后台管理系统的技术选型 1.前端项目技术栈 vue vue-router(路由) ...
  • vue项目实战

    万次阅读 2018-06-29 00:33:14
    项目概念图``` devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ compilationSuccessInfo: { messages: [`Your application is running here: http://${config.dev.host}:${port}`], }...
  • 这是 黑马程序员 vue.js 项目部分 视频配套的 课程资料,是老师做好的 项目源码。原有的 项目接口根路径 http://vue.studyit.io 已经不能用,项目源码中已经 使用了 现在可以用的 路径
  • 一个用vue2.0实现的一个移动端商城项目,实现首页,推荐,搜索,购物车,我的,登录功能,基本打通移动端商城项目,后端的数据来源node mysql, 来搭建本地数据库。
  • 项目前端饿了么实战项目实战源码,适合前端基础学习和练习。几乎还原真实的商城,基本涵盖所有的页面和动画。简单易懂,适合有一定的javascript和vue基础小伙伴学习。
  • 2年vue项目实战经验汇总

    万次阅读 多人点赞 2020-02-05 08:30:00
    前言vue作为前端主流的3大框架之一,目前在国内有着非常广泛的应用,由于其轻量和自底向上的渐进式设计思想,使其不仅仅被应用于PC系统,对于移动端,桌面软件(electronjs)等也有广...
  • 小编收集了前端开发11个项目...项目一:小米官网 首先选择小米官网为第一个实战案例,是因为刚开始入门,有个参考点,另外站点比较偏向 目前的卡片式设计,实现常见效果。目的为学者练习编写小米官网,熟悉 div+css...
  • Vue.js项目开发实战》学习笔记

    千次阅读 2019-12-31 19:48:16
    Vue.js项目开发实战》学习笔记 MVC,MVP和MVVM都是常见的软件架构设计模式。 SPA是一种架构理念,单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用。 Restful作为一种软件架构风格,是...
  • 2019全新vue2.5项目实战全家桶单页面仿京东电商实战前端js教程 7年...
  • 本系列课程为练手项目实战:学生管理系统v4.0的开发,项目包含了如下几个内容:项目的总体介绍、基本功能的演示、Vuejs的初始化、Element UI的使用、在Django中实现针对数据的增删改查的接口、在Vuejs中实现前端增删...
  • 2、已经开发的项目转ts 项目 ( 整个项目全部转成 ts ,包括vue文件和js 文件) 3、应用 注:typescript 为 javascript 的超集, 支持所有 javascript 语法, 同时扩展了强类型约束。编译后为 es5 代码 一、TypeScript中...
  • 二、项目实战 2.1技术架构 2.2目录部署 2.3路由 2.4 webpack拓展 2.5 vue cli拓展 2.6数据 2.7开发模块顺序 三、Vue 3.1路由守卫 一、Vue Cli 在vue项目中,我们要编译vue文件,要编译E...
  • 如何建立一个vue项目
  • Vue电商项目实战(一)

    千次阅读 2019-12-02 14:07:41
    1.1 使用脚手架新建vue项目 vue create vue-mart 1.2 安装cube-ui cube-ui 是滴滴2017年底开源的一款基于 Vue.js 2.0 的移动端组件库,主要核心目标是做到体验极致、灵活性强、易扩展以及提供良好的周边生态—后...
  • 之前公司在vue使用上大多都是后台应用,使用的是iview-admin框架,加起来也做了不少的项目,整体的感觉是非常舒服,首先在ui方面: iview的ui清新简单,组件完整且没有坑,基本上各种情况都帮你想到,按照文档...
  • 小兔鲜儿Vue3.0前端电商项目实战

    千次阅读 2021-10-07 12:01:56
    项目采用前后端分离模式,前台使用了VUE3.0技术栈构建,自己封装的UI组件库,接入了QQ登录,支付宝支付业务,以及前端SKU解决方案,本地线上购物车解决方案 后台接口基本完毕,但是数据缺乏(分类,商品),所以会有...
  • │ ├── routes 前端路由 │ │ └── index .js │ ├── store 应用级数据(state) │ │ └── index .js │ └── views 页面目录 │ ├── hello .vue │ └── notfound .vue ├── static 纯...
  • vue项目实战总结

    2021-03-17 11:38:52
    就把前一段时间做过的vue项目,进行一次完整的总结。这次算是详细总结,会从项目的搭建,一直到最后的服务器上部署。废话不多说了。干货直接上。一、 必须node环境, 这次就不写node环境的安装了。过两天我会写个node...
  • vue.js的项目实战

    万次阅读 多人点赞 2018-11-16 08:35:15
    vue.js的项目实战   需求背景 组件库是做UI和前端日常需求中经常用到的,把一个按钮,导航,列表之类的元素封装起来,方便日常使用,调用方法只需直接写上或者这样的代码就可以,是不是很方便呢,接下来我们将要...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,238
精华内容 1,695
关键字:

vue前端项目实战案例

vue 订阅