精华内容
下载资源
问答
  • Vue项目案例

    2020-12-30 15:14:39
    import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' import First from '../views/first.vue' Vue.use(VueRouter) const routes = [ { path: '/', component: ...

    在这里插入图片描述
    在这里插入图片描述
    路由:index.js

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Home from '../views/Home.vue'
    import First from '../views/first.vue'
    
    Vue.use(VueRouter)
    
    const routes = [
      {
        path: '/',
        component: First
      },
      {
        path: '/about',
        name: 'About',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
      }
    ]
    
    const router = new VueRouter({
      mode: 'history',
      base: process.env.BASE_URL,
      routes
    })
    
    export default router
    
    

    视图页面:views

    <template>
        <div class="main">
            <div class="left">
                <Left></Left>
            </div>
            <div class="right">
                <div class="top">
                    <img src="img/title.jpg" alt="">
                </div>
                <div class ="buttom">
                    <Right></Right>
                </div>
            </div>
        </div>
    </template>
    
    <script>
        import Left from "../components/Left";
        import Right from "../components/Right";
        export default {
           components:{
               Left,
               Right
           }
        }
    </script>
    
    <style scoped>
        *{
            padding: 0;
            margin:0;
        }
        .left{
            width:100px;
            float: left;
            margin-right: 10px;
        }
        .right{
            width: 1000px;
            float: left;
            margin-left: 10px;
        }
        .main{
            width: 1200px;
            margin: 20px auto;
        }
        .top img{
            height: 200px;
            width: 1000px;
            object-fit: cover;
        }
        .left,.right{
            background-color: #f5f5f5;
            height: 500px;
        }
    </style>
    

    组件零部件components
    msg.js

    import Vue from 'vue';
    export default new Vue;
    /*事件总线*/
    

    Left.vue

    <template>
        <div>
            <div class="title">热门推荐</div>
            <ul class="menu">
                <li @click="menu1">笔记本电脑</li>
                <li @click="menu2">手机</li>
                <li @click="menu3">手机</li>
                <li @click="menu4">手机</li>
                <li>手机</li>
                <li>手机</li>
                <li>手机</li>
                <li>手机</li>
                <li>手机</li>
                <li>手机</li>
                <li>手机</li>
            </ul>
        </div>
    </template>
    
    <script>
    	//引入事件总线
        import Msg from './msg.js'
        export default {
            name: "left",
            //事件
            methods:{
                menu1:function () {
                	//事件总线传值,$emit('参数名','参数值')触发$on
                    Msg.$emit("val","1");
                },
                menu2:function () {
                    Msg.$emit("val","2");
                },
                menu3:function () {
                    Msg.$emit("val","3");
                },
                menu4:function () {
                    Msg.$emit("val","4");
                }
            }
        }
    </script>
    
    <style scoped>
        .title{
            width: 100px;
            color: red;
        }
        .menu li{
            list-style: none;
            height: 40px;
            margin-left: -40px;
            margin-bottom: 2px;
            background-color: white;
            line-height: 40px;
            cursor: pointer;
        }
    </style>
    

    Right.vue(父组件)

    <template>
        <div>
            <div v-if="sss==1">
                <GoodsList :goodId="1"></GoodsList>
            </div>
            <div v-else-if="sss==2">
                <GoodsList :goodId="2"></GoodsList>
            </div>
            <div v-else-if="sss==3">
                3333
            </div>
            <div v-else-if="sss==4">
                4444
            </div>
            <div v-else>
                <GoodsList :goodId="0"></GoodsList>
            </div>
        </div>
    </template>
    
    <script>
       //引入事件总线
        import Msg from './msg.js'
        //引入子组件
        import GoodsList from './goodsList'
        export default {
            name: "Right",
            //初始默认值
            data(){
                return{
                    sss:0
                }
            },
            //钩子函数
            mounted:function () {
                //this关键指的是当前文件vue本身
                var that = this;
                //事件总线接收参数
                Msg.$on('val',function(m){
                    //this代表on事件,that代表vue文件本身,m是传的参数
                    that.sss = m;
                })
            },
            //注册的组件
            components:{
                GoodsList
            }
        }
    </script>
    

    要使用json安装一个传插件axios,然后进行注册

    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import axios from 'axios'
    
    Vue.prototype.$http=axios
    Vue.config.productionTip = false
    
    new Vue({
      router,
      render: h => h(App)
    }).$mount('#app')
    
    

    bjb.json同理shouji.json

    [
      {
        "goodsname": "联想",
        "img": "img/bjb/1.jpg"
      },
      {
        "goodsname": "联想",
        "img": "img/bjb/2.jpg"
      },
      {
        "goodsname": "联想",
        "img": "img/bjb/3.jpg"
      },
      {
        "goodsname": "联想",
        "img": "img/bjb/4.jpg"
      },
      {
        "goodsname": "联想",
        "img": "img/bjb/5.jpg"
      },
      {
        "goodsname": "联想",
        "img": "img/bjb/6.jpg"
      },
      {
        "goodsname": "联想",
        "img": "img/bjb/7.jpg"
      },
      {
        "goodsname": "联想",
        "img": "img/bjb/8.jpg"
      },
      {
        "goodsname": "联想",
        "img": "img/bjb/9.jpg"
      },
      {
        "goodsname": "联想",
        "img": "img/bjb/10.jpg"
      }
    ]
    

    goodsList.vue(子组件)

    <template>
        <div name="show">
            <ul class="goodlist">
                <li v-for="goods in List">
    		        //绑定图片及时响应
                    <img v-bind:src="goods.img">
                    //插值
                    <p>{{goods.goodsname}}</p>
                </li>
            </ul>
        </div>
    </template>
    
    <script>
        export default {
            name: "show",
            //初始化值
            data(){
                var that = this;
                var url = '';
                if(this.goodId==1){
                    url ="json/bjb.json";
                }else if(this.goodId==2){
                    url = "json/shouji.json"
                }else{
                    url="json/bjb.json"
                }
                //发送请求获取数据axios里边的$http
                this.$http.get(url).then(res=>{
                    that.List=res.data;
                })
                return{
                    List:[]
                }
            },
            //子组件向父组件传值
            props:{
                goodId:Number
            },
            //监听goodsId是否改变
            watch:{
                goodId(){
                    var that = this;
                    var url = '';
                    if(that.goodId==1){
                        url ="json/bjb.json";
                    }else if(that.goodId==2){
                        url = "json/shouji.json"
                    }
                    this.$http.get(url).then(res=>{
                        //res里边的关键字data
                        that.List=res.data;
                    })
                    //返回数据
                    return{
                        List:[]
                    }
                }
            }
        }
    </script>
    
    <style scoped>
        .goodlist{
            margin:10px;
        }
        .goodlist li{
            width: 180px;
            height: 180px;
            list-style:none;
            float: left;
            font-size: 9px;
            color: red;
            margin-bottom: 30px;
        }
        .goodlist img{
            width: 170px;
            height: 170px;
        }
    </style>
    
    展开全文
  • webpack + vue 项目案例

    2019-07-07 20:10:23
    一、webpack + vue项目的基本构建和配置 1、在指定目录下创建项目文件夹 2、使用vscode开发工具打开项目文件夹,并进行初始化 npm init // 项目初始化命令 3、 做好以上步骤,那么就可以进行安装并配置项目所需包...

    从零开始搭建webpack + vue 项目

    一、webpack + vue项目的基本构建和配置

    1、在指定目录下创建项目文件夹

    2、使用vscode开发工具打开项目文件夹,并进行初始化

    npm init  // 项目初始化命令
    

    3、 做好以上步骤,那么就可以进行安装并配置项目所需包文件

    3.1 、首先,需要安装项目打包工具、配置项目入口文件以及项目打包输出文件
    // 如果你使用webpack版本,则需要安装webpack-cli
    npm install --save-dev webpack
    npm install --save-dev webpack-cli
    
    3.2 创建项目目录结构,基本目录如下

    [外链图片转存失败(img-jT3ATen7-1562501291415)(/home/andycabbage/sources/typora/images/ztodo-1.png)]

    build: 文件夹主要是存放webpack、vue-loader的配置文件

    dist:项目文件打包后存放的目录(此目录不用特意去创建,在打包输出文件时指定目录名称即可)

    node_modules:所有公共包文件所在目录,如:webpack、vue、stylus等

    src:存放源码

    package.json:配置项目运行构建等命令、项目名称,版本号、作者等,以及公共包的版本好,如:“webpack”: “^4.35.2”,

    3.3 首先安装webpack、webpack-cli、vue、vue-loader、css-loader、vue-template-compiler基础包
    npm install --save-dev webpack webpack-cli
    npm install vue -S
    npm install -D vue-loader vue-template-compiler
    npm install --save-dev css-loader
    
    3.3.1 在src目录下创建app.vue文件
    <template>
      <div id="test">
        {{ text }}
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          text: 'test vue app'
        }
      }
    }
    </script>
    
    <style>
    #test{
      color: red;
    }
    </style>
    
    3.3.2 创建入口文件index.js
    import Vue from 'vue'
    import App from './app.vue'
    
    const root = document.createElement('div')
    document.body.appendChild(root)
    
    new Vue({
      render: (h) => h(App)
    }).$mount(root)
    
    
    3.4 webpack + vue 基本配置,如下:
    const path = require('path')
    const VueLoaderPlugin = require('vue-loader/lib/plugin')
    
    const config = {
        entry: path.resolve(__dirname, './src/index.js'),  // 入口文件
        output: {   // 出口文件
            filename: 'bundle.js',
            path: path.resolve(__dirname, 'dist')
        },
        // mode: 'production',   // 设置module参数,可启用相应模式的webpack内置优化
        module: {
            rules: [
                {
                    test: /\.vue$/,
                    loader: 'vue-loader'
                },
                {
                    test: /\.css$/,
                    loader: 'css-loader'
                }
            ]
        },
        plugins: [
            new VueLoaderPlugin()
        ]
    }
    
    module.exports = config
    

    注意:在使用vue-loader15+,必须配置VueLoaderPlugin

    3.4.1 在package.json文件中配置构建命令
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack --config webpack.config.js"
      },
    

    在此配置运行命令的好处是只会调用安装在项目里面的webpack,如果在命令窗口直接运行npm run build是调用全局的webpack,全局webpack可能会和项目使用到的webpack版本有所不同,所以在package文件配置命令,可以很好的避免版本上带来的问题。

    ok!到此项目运行npm run build 进行构建了

    4、配置项目各种静态资源及css预处理器

    4.1 静态资源配置
    4.1.1 静态资源安装
    npm install style-loader --save-dev
    npm install --save-dev url-loader file-loader //url-loader是基于file-loader的
    
    4.1.2 配置
    module: {
            rules: [
                {
                    test: /\.css$/,
                    use: {
                        'style-loader',
                        'css-loader'
                    }
                },
                {
                    test: /\.(gif|jpg|jpeg|png|svg)/,
                    use: {
                        loader: 'url-loader',
                        options: {
                            limit: 1024,    // 每次输出文件的字节数的大小
                            name: '[name].[ext]'    // 输出的文件类型
                        }
                    }
                }
            ]
        },
    
    4.1.3 css预处理器
    npm install stylus-loader stylus --save-dev
    

    基础配置

    module: {
            rules: [
                {
                    test: /\.styl(us)?/,
                    use: [
                        'css-loader',
                        'stylus-loader'
                    ]
                }
            ]
    }
    

    5、webpack-dev-server的配置和相关设置

    npm install --save-dev webpack-dev-server
    
    npm install --save-dev cross-env
    // cross-env是设置系统环境变量的,不同平台会有不同的环境变量,cross-env主要提供处理环境变量方案,只要正确的设置,则无需在开发中过多的去关注环境变量的设置问题
    

    在使用webpack-dev-server之前,需要配置webpack的编译目标target

     target: 'web',  // 编译目标
    

    综合以上配置如下:

    const path = require('path')
    const VueLoaderPlugin = require('vue-loader/lib/plugin')
    const HtmlPlugin = require('html-webpack-plugin')
    const webpack = require('webpack')
    
    const isDev = process.env.NODE_ENV === 'development'
    
    const config = {
        target: 'web',  // 编译目标
        entry: path.resolve(__dirname, './src/index.js'),  // 入口文件
        output: {   // 出口文件
            filename: 'bundle.js',
            path: path.resolve(__dirname, 'dist')
        },
        // mode: 'production',   // 设置module参数,可启用相应模式的webpack内置优化
        module: {
            rules: [
                {
                    test: /\.vue$/,
                    loader: 'vue-loader'
                },
                {
                    test: /\.css$/,
                    use: [
                        'style-loader',
                        'css-loader'
                    ]
                },
                {
                    test: /\.styl(us)?/,
                    use: [
                        'style-loader',
                        'css-loader',
                        'stylus-loader'
                    ]
                },
                {
                    test: /\.(gif|jpg|jpeg|png|svg)/,
                    use: {
                        loader: 'url-loader',
                        options: {
                            limit: 1024,    // 每次输出文件的字节数的大小
                            name: '[name].[ext]'    // 输出的文件类型
                        }
                    }
                }
            ]
        },
        plugins: [
            new VueLoaderPlugin(),
            new webpack.DefinePlugin({
                'process-env': {
                    NODE_ENV: isDev ? '"development"' : '"production"'
                }
            }),
            new HtmlPlugin()
        ]
    }
    
    if (isDev) {
        config.devTool = '#cheap-module-eval-source-map'
        config.devServer = {
            port: 8010,
            host: '0.0.0.0',    // 可以通过loaclhost、127.0.0.1、本机内网ip、手机等访问
            overlay: {  // 将编译的错误显示到页面上
                errors: true
            },
            hot: true   // 热加载
        }
    }
    
    module.exports = config
    
    

    以上是webpack + vue的基本配置

    二、代码校验eslint的配置

    安装

    npm install eslint --save-dev
    

    手动设置需要的插件:

    npm install --save-dev eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node
    

    在根目录下创建 .eslintrc 文件

    在eslint中无法直接识别vue文件中的JavaScript的代码,需要安装eslint-plugin-html插件

    npm install --save-dev eslint-plugin-html
    

    .eslintrc 文件配置

    {
      "extends": ["standard", "plugin:vue/recommended"],
      "plugins": [
        "html"
      ]
    }
    

    运行eslint的命令配置(package.json)

      "scripts": {
        "lint": "eslint --ext .js --ext .jsx --ext .vue src/",
        "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
      },
    

    –fix 自动修复问题代码

    配置好后,就可以执行npm run lint-fix和npm run lint 进行校验代码,执行后会报如下错误

    [外链图片转存失败(img-KYGHhqd8-1562501291418)(/home/andycabbage/sources/typora/images/errors-1.png)]

    解决方法: https://blog.csdn.net/qq_37254736/article/details/92794864

    再次执行命令之前需安装 eslint-plugin-vue插件

    npm i --save-dev eslint-plugin-vue
    

    自动校验代码

    npm i --save-dev eslint-loader babel-eslint
    

    在eslintrc文件中增加如下配置

      "parserOptions": {
        "parser": "babel-eslint",
        "ecmaFeatures": {
          "jsx": true
        }
    

    为了更好使用代码规则,避免错误的代码格式提交到远程仓库,需要安装husky(二哈)

    npm i --save-dev husky
    

    在package.json中的配置

      "scripts": {
        "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/",
        "precommit": "npm run lint-fix"
      },
    

    三、优化升级配置文件

    在正式开发之前还需配置postcss、babel

    npm i --save-dev postcss-loader autoprefixer
    npm i --save-dev babel-loader @babel/core
    

    postcss.config.js 配置文件

    const autoprefixer = require('autoprefixer')
    
    module.exports = {
      plugins: [
        autoprefixer()
      ]
    }
    
    
    module: {
            rules: [
                {
                  test: /\.jsx$/,
                  exclude: /(node_modules|bower_components)/,
                  use: {
                    loader: 'babel-loader',
                    options: {
                      presets: ['@babel/preset-env']
                    }
                  }
                },
                {
                    test: /\.styl(us)?/,
                    use: [
                        'style-loader',
                        'css-loader',
                        {
                          loader: 'postcss-loader',
                          options: {
                            sourceMap: true
                          }
                        },
                        'stylus-loader'
                    ]
                }
            ]
        }
    

    .babelrc配置文件

    npm i --save-dev @babel/preset-env
    npm i --save-dev babel-plugin-transform-vue-jsx@next
    npm install --save-dev @babel/plugin-syntax-jsx
    
    npm i --save-dev vue-eslint-parser eslint@^5.16.0
    
    
    {
      "presets": [
        "@babel/preset-env"
      ],
      "plugins": [
        "transform-vue-jsx"
      ]
    }
    

    提取css

    webpack4中vue官方推荐使用mini-css-extract-plugin

    单独打包类库文件

    hash与chunkhash的区别

    webpack相关文件单独打包

    待续。。。。。。

    展开全文
  • Vue 然后也开始做一个项目实战,我一直认为在实战中去发现问题然后解决问题的学习方式是最好的,所以我在学习一些 Vue 的理论之后,就开始自己利用业余时间做了一个项目,然后通过项目中的一些案例进行总结。...

    今天我们继续来说说 Vue,目前一直在自学 Vue 然后也开始做一个项目实战,我一直认为在实战中去发现问题然后解决问题的学习方式是最好的,所以我在学习一些 Vue 的理论之后,就开始自己利用业余时间做了一个项目,然后通过项目中的一些案例进行总结。

    今天我们来说说 Vue 中的内容分发 ,首先 Vue 实现了一套内容分发的 API,这套 API 是基于当前的 Web Components 规范草案,将 元素作为承载内分发内容的出口,内容分发是 Vue 中一个非常重要的功能,很多第三方的框架库都使用到了 功能,所以掌握这个技能是非常重要的。

    它可以让我们更加优雅的使用组件。

    我对 的理解有三点或者说优势,当然,这个只是我个人的理解,如果你有不同理解的地方,欢迎交流讨论,这样才能碰出不一样的花火。

    回到主题,我对内容分发的三点理解:

    1. 可以优雅的包装原生的 HTML 标签
    2. 组件标签可以嵌套,就像使用原生 HTML 标签一样
    3. 让组件更加的通用和可复用

    如果没有 元素,当我们在组件的标签中使用组件标签或者组件标签中使用 HTML 原生标签,都是没有任何作用的,这个和我们以往使用和认识的 HTML 是相违背的。

    下面我们就对这三点去做一个详细的阐述,先从一个张图开始。

    98d954c030bd495451ea0dd7055016fa.png

    这个大家都见过,一个标准的 dialog 对话框,项目中也经常使用到,我们把它抽出来做成一个组件如下:

    标题

    x
    这是一个标准的 dialog 对话框

    首先这个组件不够灵活,内容基本上是写死的,就拿标题来说,我们希望标题是可以变化的,让使用者可以传递标题进来,那么我们该如何去设计我们的这个组件呢?这就是我们今天要说的内容分发 了,我们小小的修改下我们的例子。

    这是一个标准的 dialog 对话框

    在父组件中使用它

    传递进来的标题

    x

    你会发现组件渲染之后, 元素会被替换成组件中包裹的元素,标题的内容完全由外部传递进来。

    76c588b27daa56e8613e365d95d87142.png

    上面我们只是嵌套了一个简单的 div 标签元素,插槽可以传入任何的元素,不管是HTML,还是组件元素。

    插槽的默认内容

    不仅如此,插槽还支持默认内容,当我们在外部没有传递给插槽内容时,我们可以给插槽一个默认的显示内容,如果外部有内容,默认的内容将会被外部的内容替换掉。

    这是默认标题

    x
    这是一个标准的 dialog 对话框

    在父组件中使用它,不嵌套任何的内容时,我们的组件就会有个默认的渲染标题。

     //无内容
    d36527eaf5c51f41bc4a4ed09a515ab2.png

    如果我们在父组件中提供了内容,默认的内容就会被替换。

    我是新传递的标题

    x
    c8d4901089dd5a62a571eb70a0639f1a.png

    具名插槽

    有些时候,我们除了标题有这么高的自由度之外,我们也想其它的内容也有这样的灵活性,让使用者也能通过父组件传递进来,Vue 中给我们提供了方法,我们一次可以使用很多插槽,然后给每一个插槽起个名字,也就是给我们的 添加一个 name 属性。

    于是我们就开始修改我们的对话框

    我们在外部使用时,只需要提供相应名称,我们就可以渲染出我们需要的

    带名字的插槽

    x
    这是一个标准的 dialog 对话框
    2d4273be6478f6b44c43c0783686d3b4.png

    可以看到,我们在外部可以控制组件的全部内容只要我们需要,这给我们的组件带来了很高的灵活性。除了灵活性,Vue 中还给我提供了一种叫 作用域插槽的用法,它让我们的组件更加的复用性。

    具名插槽不仅仅只能用在 元素上,它也可以直接用在一个普通的元素上

    带名字的插槽

    x

    作用域插槽

    作用域插槽在 Vue 中是一个非常重要的一个功能,它让组件更加的可复用性,但是官方文档上对作用域插槽的解释很令人蛋疼,反正我是看了几遍不是太理解,最后通过自己写了几个案例才明白原来可以这么厉害,如果你也和我一样一开始不太理解,不妨跟着我看看下面的案例或许对你的帮助很大。

    首先我们实现一个星级评价组件

    c29b64f880bf8af2118d4648498123ce.png
    展开全文
  • 前端商城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=...

    在这里插入图片描述
    在这里插入图片描述
    views/home.vue

    <template>
      <div id="home" class="home">
        <van-search v-model="value" placeholder="商品搜索 共239款好物" input-align="center"/>
        <van-swipe :autoplay="3000" style="width:100%;height:200px">
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <img v-lazy="image.image_url" style="width: 100%;height: 200px"/>
          </van-swipe-item>
        </van-swipe>
    
        <van-grid :column-num="5">
          <van-grid-item v-for="(item,index) in channel" :key="index" :icon="item.url" :text="item.name" />
        </van-grid>
        <div class="brandlist">
          <van-panel title="品牌制造商">
            <van-grid :column-num="2">
              <van-grid-item v-for="(item1,index1) in brandList" :key="index1">
                <img :src="item1.new_pic_url" style="width: 100%; height:100%;display: block"/>
                <h4 class="title">{{item1.name}}</h4>
                <p class="desc">{{item1.floor_price}}元起</p>
              </van-grid-item>
            </van-grid>
          </van-panel>
        </div>
        <div class="newlist">
          <van-panel title="食品好吃货">
            <van-grid :column-num="2">
              <van-grid-item v-for="(item2,index2) in newGoodsList" :key="index2">
                <img :src="item2.list_pic_url" style="width: 100%; height:100%;display: block"/>
                <h4 class="title1">{{item2.name}}</h4>
                <p class="desc1">{{item2.retail_price}}元起</p>
              </van-grid-item>
            </van-grid>
          </van-panel>
        </div>
        <div class="personlist">
          <van-panel title="人气">
            <van-card  v-for="(item3,index3) in hotGoodsList" :key="index3"
                    :price="item3.retail_price"
                    :desc="item3.goods_brief"
                    :title="item3.name"
                    :thumb="item3.list_pic_url"
          />
          </van-panel>
        </div>
        <div style="height: 50px"></div>
        <van-tabbar v-model="tabActive">
          <van-tabbar-item icon="wap-home">首页</van-tabbar-item>
          <van-tabbar-item icon="bookmark">分类</van-tabbar-item>
          <van-tabbar-item icon="shopping-cart">购物车</van-tabbar-item>
          <van-tabbar-item icon="column">专题</van-tabbar-item>
          <van-tabbar-item icon="manager">我的</van-tabbar-item>
        </van-tabbar>
      </div>
    </template>
    
    <script>
    // @ is an alias to /src
    import HelloWorld from '@/components/HelloWorld.vue'
    import axios from 'axios'
    import api from '../assets/config/api'
    import Vue from 'vue';
    import { Swipe, SwipeItem } from 'vant';
    import { Lazyload } from 'vant';
    import { Panel } from 'vant';
    import { Grid, GridItem } from 'vant';
    import { Card } from 'vant'
    import { Tabbar, TabbarItem } from 'vant';
    Vue.use(Tabbar);
    Vue.use(TabbarItem);
    Vue.use(Panel);
    Vue.use(Card);
    Vue.use(Grid);
    Vue.use(GridItem);
    Vue.use(Swipe);
    Vue.use(SwipeItem);
    
    
    Vue.use(Lazyload);
    export default {
      name: 'Home',
      components: {
        HelloWorld
      },
      data(){
        return{
          value:'',
          data:{},
          tabActive:0
        }
      },
      /*将钩子函数的数据放到计算,通过计算方法计算出来*/
      computed:{
        images() {
            if(typeof this.data.banner=='object'){
              return this.data.banner
            }else{
              return []
            }
        },
        channel(){
          if(typeof this.data.channel=='object'){
            return this.data.channel
          }else{
            return []
          }
        },
        brandList(){
          if(typeof this.data.brandList=='object'){
            return this.data.brandList
          }else{
            return []
          }
        },
        newGoodsList(){
          if(typeof this.data.newGoodsList=='object'){
            return this.data.newGoodsList
          }else{
            return []
          }
        },
        hotGoodsList(){
          if(typeof this.data.hotGoodsList=='object'){
            return this.data.hotGoodsList
          }else{
            return []
          }
        }
      },
      async mounted() {
        let res = await axios.get(api.IndexUrl)
        console.log(res.data)
        this.data = res.data.data
      }
    }
    </script>
    <style>
      .brandlist .van-grid-item__content{
          padding: 0px !important;
      }
      .title{
        position: absolute;
        top: 20px;
        left: 10px;
      }
      .desc{
        position: absolute;
        top: 50px;
        left: 10px;
        font-size: 14px;
        color: #999;
      }
      .title1{
          position: absolute;
          bottom: 0;
          width: 90%;
          white-space: nowrap;
          text-overflow:ellipsis;
          overflow: hidden;
      }
      .desc1{
        position: absolute;
        font-size: 14px;
        color: #999;
        bottom: -10px;
      }
      .brandlist img{
        border: 1px solid #fff;
      }
      .personlist .van-card__price{
         color: red !important;
      }
    
      .personlist .van-card__content{
        text-align:left;
        justify-content: center;
        align-content: center;
      }
    
      .personlist .van-card__title{
           font-weight: 900;
           color: #333;
           font-size: 14px;
           padding: 5px 0;
      }
    </style>
    
    

    mian.js

    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    import { Search } from 'vant';
    import 'vant/lib/index.css'
    Vue.use(Search);
    
    Vue.config.productionTip = false
    
    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app')
    
    
    展开全文

空空如也

空空如也

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

vue项目案例

vue 订阅