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

    2018-06-17 18:40:31
    这是一个入门vue实战项目,可以提升自己对vue的掌握。
  • Vue项目实战

    2020-12-04 20:56:39
    Vue项目实战开发 1.电商业务概述 客户使用的业务服务:PC端,小程序,移动web,移动app 管理员使用的业务服务:PC后台管理端。 PC后台管理端的功能:管理用户账号(登录,退出,用户管理,权限管理),商品管理...

    Vue项目实战开发

    1.电商业务概述

    客户使用的业务服务:PC端,小程序,移动web,移动app

    管理员使用的业务服务:PC后台管理端。

    PC后台管理端的功能:管理用户账号(登录,退出,用户管理,权限管理),商品管理(商品分类,分类参数,商品信息,订单),数据统计

    电商后台管理系统采用前后端分离的开发模式

    前端项目是基于Vue的SPA(单页应用程序)项目

    前端技术栈:Vue,Vue-Router,Element-UI,Axios,Echarts

    后端技术栈:Node.js,Express,Jwt(模拟session),Mysql,Sequelize(操作数据库的框架)
    2.项目初始化

    A.安装Vue脚手架

    B.通过脚手架创建项目

    C.配置路由

    D.配置Element-UI:在插件中安装,搜索vue-cli-plugin-element

    E.配置Axios:在依赖中安装,搜索axios(运行依赖)

    F.初始化git仓库

    G.将本地项目托管到github或者码云中
    3.码云相关操作

    A.注册登录码云账号

    在这里插入图片描述
    B.安装git

    在Windows上使用Git,可以从Git官网直接下载安装程序进行安装。
    
    测试命令:git --version
    

    C.点击网站右上角“登录”,登录码云,并进行账号设置
    在这里插入图片描述
    D.在本地创建公钥:在终端运行:ssh-keygen -t rsa -C “xxx@xxx.com”
    在这里插入图片描述
    E.找到公钥地址:

    Your identification has been saved in /c/Users/My/.ssh/id_rsa.

    Your public key has been saved in /c/Users/My/.ssh/id_rsa.pub.

    当我们创建公钥完毕之后,请注意打印出来的信息“Your public key has been saved in”

    /c/Users/My/.ssh/id_rsa.pub : c盘下面的Users下面的My下面的.ssh下面的id_rsa.pub就是我们创建好的公钥了

    E.打开id_rsa.pub文件,复制文件中的所有代码,点击码云中的SSH公钥,将生成的公钥复制到公钥中
    在这里插入图片描述
    G.测试公钥:打开终端,输入命令

    ssh -T git@gitee.com
    在这里插入图片描述
    H.将本地代码托管到码云中

    点击码云右上角的+号->新建仓库
    在这里插入图片描述
    I.进行git配置:
    在这里插入图片描述
    4.配置后台项目

    A.安装phpStudy并导入mysql数据库数据
    在这里插入图片描述
    B.安装nodeJS,配置后台项目,从终端打开后台项目vue_api_server

    然后在终端中输入命令安装项目依赖包:npm install

    C.使用postman测试api接口
    在这里插入图片描述
    后续正在开发中

    展开全文
  • vue项目实战

    2019-05-30 18:04:47
    vue项目实战演示地址github仓库部分截图 演示地址 https://lengyuexin.github.io/vue-demo/#/home github仓库 https://github.com/lengyuexin/vue-demo/ 部分截图 做的比较简单,适合新手 这...
    
    
    

    演示地址

    https://lengyuexin.github.io/vue-demo/#/home

    github仓库

    https://github.com/lengyuexin/vue-demo/

    部分截图

    在这里插入图片描述


    在这里插入图片描述


    在这里插入图片描述

    在这里插入图片描述


    在这里插入图片描述


    在这里插入图片描述


    在这里插入图片描述

    在这里插入图片描述


    在这里插入图片描述


    在这里插入图片描述

    在这里插入图片描述


    在这里插入图片描述


    在这里插入图片描述

    • 做的比较简单,适合新手
    • 这是用的移动端框架,查看的时候可以用手机或者浏览器的手机模式
    • 存在适配问题,这不是重点啦…业务至上
    展开全文
  • vue项目实战语法

    2018-04-09 22:46:19
    vue项目实战语法,vue项目实战语法,vue项目实战语法,vue项目实战语法,vue项目实战语法,vue项目实战语法,vue项目实战语法
  • VUE项目实战

    2019-04-14 11:01:45
    vue2仿锤子商城实战项目课程2018 课程介绍 这是一个基于vue2.0的商城实战开发类课程,适用于对vue有些许基础的同学。课程会手把手教你如何在项目中使用vue及相关插件实现一个完整的购物流程。从商品的展示到加入...

    VUE 我看了下招聘,公司还是蛮高的 7000 + 所以值得细致研究下!

    商城实战教程,需要可去研究下

    vue2仿锤子商城实战项目课程2018

    课程介绍

    这是一个基于vue2.0的商城实战开发类课程,适用于对vue有些许基础的同学。课程会手把手教你如何在项目中使用vue及相关插件实现一个完整的购物流程。从商品的展示到加入购物车,再到商品的结算、订单等等,一应俱全。知识点:vue基础组件库、vuex、vue-router、vue-cli以及webpack。

     

     

    课程目录

     

    1Vue仿锤子商城实战

    1-项目介绍

    2-环境配置及目录结构

    3-商品列表页的布局

    4-商品列表套数据

    5-商品页组件

    6-商品加入购物车

    7-购物车商品删除

    8-购物车小球效果

    9-商品详情页数据

    10-商品详情页交互

    11-购物清单页

    12-购物清单的增删多选

    13-订单确认页商品数据

    14-收货地址及发票信息

    15-添加收货信息-上

    16-添加收货信息-下

    17-提交订单

    18-订单详情页

    19-我的订单页

    20-课后练习


    好,我们今天来复习下简单的vue-cli 实战,要做好笔记,为啥,因为你不做笔记,就代表你没有真正学会!

    好,我们先看下效果:

    整体是一个app 组件。里面包含两块,一个是addItem组件,一个列表组件, 而列表组件,包含一个个条目

    我们先不着急说项目,我们先看下 vue-cli 目录信息!

     

    以上都是配置信息,所以说vue-cli 做了好多事情

    开启一个简单的服务器


    组件的使用方式,三个步骤, 上面显示的很清楚!

    App.vue

    <template>
      <div id="app">
        <div class="panel panel-default">
          <div class="panel-body text-center">
            Basic panel example
          </div>
        </div>
        <hr>
        <div class="container">
          <div class="row">
              <AddItem :addMessage="addMessage" ></AddItem>
            <div class="col-md-7">
    
                  <p v-show="isShow()">
                     没有任何数据,请在左侧去添加
    
                  </p>
    
              <listItem :datas="datas" :del="del"></listItem>
    
            </div>
          </div>
    
        </div>
      </div>
    
    
    </template>
    <script>
    import AddItem from "@/components/AddItem.vue"
    import listItem from "@/components/listItem"
    export default {
      name: 'App',
      components:{
        HelloWorld,AddItem,listItem
      },
      data(){
        return {
    
          datas:[
            {name2:"action",message:"actions is ok "},
            {name2:"action3",message:"actions is ok3 "},
            {name2:"action2",message:"actions is ok2 "}
    
          ]
        }
      },
      methods:{
        isShow(){
            return this.datas.length==0;
        },
        del(index){
          this.datas.splice(index,1);
        },
        addMessage(item){
          this.datas.unshift(item);
        }
      }
    }
    </script>
    
    <style>
    #app {
    
    }
    </style>
    

    一个基本的vue 组件,基本是三大块

     

    就这三大块, template 写界面, style 写样式, script 主要写VM配置 对象

     

    AddItem.vue

    <template>
      <div class="col-md-5">
        <form>
          <div class="form-group">
            <label for="exampleInputEmail1">name</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" v-model="name2">
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">message</label>
            <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Password" v-model="message">
          </div>
          <button type="submit" class="btn btn-default" @click="addMessage2">add</button>
        </form>
    
      </div>
    
    </template>
    
    
    <script>
        export default {
            data() {
              return {
                name2: "",
                message: ""
              }
            },
            props:["addMessage"],
              methods:{
                addMessage2(){
                  let {name2,message} = this;
                  var comment = {
                    name2,message
                  }
    //              alert(comment)
                  this.addMessage(comment);
                }
              }
    
            }
    
    
    
    </script>
    
    
    <style>
    
    
    </style>
    

    listItem

    <template>
      <div>
      <div class="panel panel-default" v-for="(item , index) in datas" :key="index">
        <div class="panel-heading">{{item.name2}}</div>
        <div class="panel-body">
          {{item.message}}
          !-- Indicates a dangerous or potentially negative action -->
          <button type="button" class="btn btn-danger"
                  @click ="del2(index)">删除</button>
        </div>
      </div>
      </div>
    </template>
    
    <script>
        export default {
            props:["datas","del"],
            methods:{
              del2(index){
                this.del(index);
              }
            }
    
        }
    </script>
    <style></style>
    

    所有的代码我都标出来了,下面就是细节了!

    组件的引用!

    这个组件的引用,我用到了@ 符号,这个在配置中有配置

    代表src 路径


    属性传递,不光可以传数据,还可以传函数!

    属性的接受!

    其它就没有啥可标记的了!

     

    基本组件套路, 1, 拆组件(拆页面+ 拆css)

    2, 静态初始化

    3, 动态初始化显示

    4, 加事件+ 处理交互!

    ——————————————————————————————————

     

    行,这就是基本vue-cli的使用!

     

     

     

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,377
精华内容 3,350
关键字:

vue项目实战

vue 订阅