精华内容
下载资源
问答
  • vue入门——通过webpack构建vue项目

    千次阅读 2019-01-25 20:04:04
    本篇主要介绍如何通过webpack构建一个简单的vue项目,不涉及vue的安装,如果没有安装vue的话,请先安装vue. 在使用vue的时候,通常有两种方式,一种是在html中引入vue.min.js,利用vue的语法规则进行开发。另一种是...

    简介:

    本篇主要介绍如何通过webpack构建一个简单的vue项目,不涉及vue的安装,如果没有安装vue的话,请先安装vue.

    在使用vue的时候,通常有两种方式,一种是在html中引入vue.min.js,利用vue的语法规则进行开发。另一种是通过webpack构建vue工程(不知这样描述是不是准确),本篇将对该方法展开叙述(前提安装了vue):

    步骤

    1、建立项目路径。首先建立一个项目路径(我的位于D:\Program Files\vueProject),尽量不要放在c盘,打开命令行窗口,将路径切换到工作路径中。

    2、输入vue init webpack demo,建立项目。其中demo使我们要建立的项目名称,当脚本执行时,会继续进行确认。如下图,其中的一些乱码我也不知道是什么原因。

    接下来就是确认项目描述信息,作者信息,这个根据个人喜好,填写吧。Vue build选择默认的,vue-router选择yes(如果不选择,则无法使用vue的路由功能,有关路由功能的参考vue路由详解,个人觉得这块还是比较重要的)

    下面的内容应该是有关js语法检测的内容,直接输入n就可以,暂时用不到。然后按enter,直到开始安装。

    出现以下内容,表示已经正确安装。

    根据提示信息,切换到demo目录下,然后执行npm run dev。编译并启动我们的项目

    在浏览器中输入访问的网址,访问界面表示已经正确配置

    至此,项目已经成功构建,在下一篇内容中,我们将对生成的文件进行简单的说明。

    展开全文
  • Vue项目打包部署总结

    万次阅读 多人点赞 2020-12-13 16:39:40
    关注公众号前端开发博客,回复“加群”加入我们一起学习,天天进步作者:沐码链接:https://wintc.top/article/29使用Vue做前后端分离项目时,通常前端是单独部署,...

    关注公众号 前端开发博客,回复“加群”

    加入我们一起学习,天天进步

    作者:沐码

    链接:https://wintc.top/article/29

    使用Vue做前后端分离项目时,通常前端是单独部署,用户访问的也是前端项目地址,因此前端开发人员很有必要熟悉一下项目部署的流程与各类问题的解决办法了。Vue项目打包部署本身不复杂,不过一些前端同学可能对服务器接触不多,部署过程中还是会遇到这样那样的问题。本文介绍一下使用nginx服务器代理前端项目的方法以及项目部署的相关问题,内容概览:

    Vue项目打包发布问题汇总

    一、准备工作——服务器和nginx使用

    1. 准备一台服务器

    我的是ubuntu系统,linux系统的操作都差不多。没有服务器怎么破?

    如果你只是想体验一下,可以尝试各大厂的云服务器免费试用套餐,比如华为云免费试用,本文相关操作即是在华为云上完成的。不过如果想时常练练手,我觉得可以购买一台云服务器,比如上面的华为云或者阿里云都还挺可靠。我的个人网站就是部署在阿里云,你可以点击我的推广链接进行购买,近期有活动首次购买不到100块/年。

    2. nginx安装和启动

    轻装简行,这部分不作过多赘述(毕竟网上相关教程一大堆),正常情况下仅需下面两个指令:

    # 安装,安装完成后使用nginx -v检查,如果输出nginx的版本信息表明安装成功
    sudo apt-get install nginx
    # 启动
    sudo service nginx start
    

    启动后,正常情况下,直接访问 http://服务器ip 或 http://域名 (本文测试用的服务器没有配置域名,所以用ip,就本文而言,域名和ip没有太大区别)应该就能看到nginx服务器的默认页面了——如果访问不到,有可能是你的云服务器默认的http服务端口(80端口)没有对外开放,在服务器安全组配置一下即可。

    Vue项目打包发布问题汇总

    3. 了解nginx: 修改nginx配置,让nginx服务器代理我们创建的文件

    查看nginx的配置,linux系统下的配置文件通常会存放在/etc目录下,nginx的配置文件就在/etc/nginx文件夹,打开文件/etc/nginx/sites-available/default(nginx可以有多个配置文件,通常我们配置nginx也是修改这个文件):

    Vue项目打包发布问题汇总

    可以看到默认情况下,nginx代理的根目录是/var/www/html,输入 http://服务器ip会访问这个文件夹下的文件,会根据index的配置值来找默认访问的文件,比如index.html、index.htm之类。

    我们可以更改root的值来修改nginx服务代理的文件夹:

    1. 创建文件夹/www,并创建index.html,写入"Hello world"字符串

      mkdir /www
      echo 'Hello world' > /www/index.html
      
    2. 修改root值为 /www

    3. sudo nginx -t 检查nginx配置是否正确

    4. 加载nginx配置:sudo nginx -s reload

    再次访问页面,发现页面内容已经变成了我们创建的index.html:

    Vue项目打包发布问题汇总

    二、Vue项目打包同步文件到远程服务器

    1. 打包

    默认情况下,使用vue-cli创建的项目,package.json里的script应该已经配置了build指令,直接执行yarn build 或者 npm run build即可。

    2. 同步到远程服务器

    我们使用nginx部署Vue项目,实质上就是将Vue项目打包后的内容同步到nginx指向的文件夹。之前的步骤已经介绍了怎样配置nginx指向我们创建的文件夹,剩下的问题就是怎么把打包好的文件同步到服务器上指定的文件夹里,比如同步到之前步骤中创建的/www。同步文件可以在git-bash或者powershell使用scp指令,如果是linux环境开发,还可以使用rsync指令:

    scp -r dist/* root@117.78.4.26:/www
    或
    rsync -avr --delete-after dist/* root@117.78.4.26:/www 
    

    注意这里以及后续步骤是root使用用户远程同步,应该根据你的具体情况替换root和ip(ip换为你自己的服务器IP)。

    为了方便,可以在package.json脚本中加一个push命令,以使用yarn为例(如果你使用npm,则push命令中yarn改成npm  run即可):

     "scripts": {
        "build": "vue-cli-service build",
        "push": "yarn build && scp -r dist/* root@117.78.4.26:/www"
      },
    

    这样就可以直接执行yarn push 或者npm run push直接发布了。不过还有一个小问题,就是命令执行的时候要求输入远程服务器的root密码(这里使用root来连接远程的,你可以用别的用户,毕竟root用户权限太高了)。

    为了避免每次执行都要输入root密码,我们可以将本机的ssh同步到远程服务器的authorized_keys文件中。

    3. 同步ssh key

    1. 生成ssh key:使用git bash或者powershell执行ssh-keygen可以生成ssh key。会询问生成的key存放地址,直接回车就行,如果已经存在,则会询问是否覆盖:

    2. 同步ssh key到远程服务器,使用ssh-copy-id指令同步

      ssh-copy-id -i ~/.ssh/id_rsa.pub root@117.78.4.26
      

    输入密码后,之后再次同步就不需要输入密码了。其实ssh_key是同步到了服务器(此处是root用户家目录)~/.ssh/authorized_keys文件里:

    当然你也可以手动复制本地~/.ssh/id_rsa.pub(注意是pub结尾的公钥)文件内容追加到服务器~/.ssh/authorized_keys的后面(从命名可以看出该文件可以存储多个ssh key)

    注意:这里全程使用的是root用户,所以没有文件操作权限问题。如果你的文件夹创建用户不是远程登录用户,或许会存在同步文件失败的问题,此时需要远程服务器修改文件夹的读写权限(命令 chmod)。

    创建了一个测试项目(点击本链接可以在gihub查看)[1]试一下,打包、文件上传一句指令搞定啦:

    Vue项目打包发布问题汇总

    访问一下,果然看到了我们熟悉的界面:

    Vue项目打包发布问题汇总

    至此,常规情况下发布Vue项目就介绍完了,接下来介绍非域名根路径下发布以及history路由模式发布方法。

    三、非域名根路径发布

    有时候同一台服务器同一端口下可能会根据目录划分出多个不同的项目,比如我们希望项目部署到http://a.com/test下,这样访问http://a.com/test访问到的是项目的首页,而非test前缀的地址会访问到其它项目。此时需要修改nginx配置以及Vue打包配置。

    1. nginx配置

    只需要添加一条location规则,分配访问路径和指定访问文件夹。我们可以把/test指向之前创建的/www文件夹,这里因为文件夹名称和访问路径不一致,需要用到alias这个配置:

    Vue项目打包发布问题汇总

    如果文件夹名称与访问路径一致都为test,那这里可以用root来配置:

    Vue项目打包发布问题汇总

    这里要将/test配置放到/之前,意味着在路由进入的时候,会优先匹配/test。如果根路径/下的项目有子路由/test,那http://xxxx/test只会访问到/www里的项目,而不会访问该子路由。

    2. 项目配置

    为了解决打包后资源路径不对的问题,需要在vue.config.js中配置publicPath,这里有两种配置方式,分别将publicPath配置为./和/test:

    Vue项目打包发布问题汇总

    更新nginx配置,发布后即可正常访问啦。这里的两种配置方式是有区别的,接下来会看一下它们的区别。如果不进行项目配置,直接发布访问会出现JS、CSS等资源找不到导致页面空白的问题:

    Vue项目打包发布问题汇总

    该问题原因是资源引用路径不对,页面审查元素可以看到,页面引用的js都是从根路径下引用的:

    Vue项目打包发布问题汇总

    查看打包后的文件结构,可以看到js/css/img/static等资源文件是与index.html处于同级别的:

    Vue项目打包发布问题汇总

    对于两种配置方式,看看都是怎么生效的:

    1. publicPath配置为./, 打包后资源引用路径为相对路径:

    2. publicPath配置为/test,打包后资源相对路径为从域名根目录开始的绝对路径:

    两种配置都可以正确地找到JS、CSS等资源。不过还有个问题,那就是static中的静态资源依旧会找不到。

    3. 绝对路径引用的静态资源找不到的问题

    因为在打包过程中,public下的静态资源都不会被webpack处理,我们需要通过绝对路径来引用它们。当项目部署到非域名根路径上时,这点非常头疼,你需要在每个引用的URL前面加上process.env.BASE_URL(该值即对应上文配置的publicPath),以使得资源能被正常访问到。我们可以在main.js把这个变量值绑定到Vue.prototype,这样每个Vue组件都可以使用它:

    Vue.prototype.$pb = process.env.BASE_URL
    

    在模板中使用:

    <img :src="`${$pb}static/logo.png`">
    

    然而,更加头疼并且没有良好解决方案的问题是在组件style部分使用public文件夹下的静态资源:

    • 如果需要使用图片等作为背景图片等,尽量使用内联方式使用吧,像在模板中使用一样。

    • 如果需要引入样式文件,则在index.html中使用插值方式引入吧。

    关于静态资源的问题,vue-cli的推荐是尽量**将资源作为你的模块依赖图的一部分导入(即放到assets中,使用相对路径引用),**避免该问题的同时也带来其它好处:

    四、history模式部署

    默认情况下,Vue项目使用的是hash路由模式,就是URL中会包含一个#号的这种形式。#号以及之后的内容是路由地址的hash部分。正常情况下,当浏览器地址栏地址改变,浏览器会重新加载页面,而如果是hash部分修改的话,则不会,这就是前端路由的原理,允许根据不同的路由页面局部更新而不刷新整个页面。H5新增了history的pushState接口,也允许前端操作改变路由地址但是不触发页面刷新,history模式即利用这一接口来实现。因此使用history模式可以去掉路由中的#号。

    1. 项目配置

    在vue-router路由选项中配置mode选项和base选项,mode配置为'history';如果部署到非域名根目录,还需要配置base选项为前文配置的publicPath值(注意:此情况下,publicPath必须使用绝对路径/test的配置形式,而不能用相对路径./)

    Vue项目打包发布问题汇总

    2. nginx配置

    对于history模式,假设项目部署到域名下的/test目录,访问http://xxx/test/about的时候,服务器会去找/test指向的目录下的about子目录或文件,很显然因为是单页面应用,并不会存在a这个目录或者文件,就会导致404错误:

    Vue项目部署后页面找不到

    我们要配置nginx让这种情况下,服务器能够返回单页应用的index.html,然后剩下的路由解析的事情就交给前端来完成即可。

    history模式nginx配置

    这句配置的意思就是,拿到一个地址,先根据地址尝试找对应文件,找不到再试探地址对应的文件夹,再找不到就返回/test/index.html。再次打开刚才的about地址,刷新页面也不会404啦:

    Vue项目打包发布问题汇总

    3. history模式部署到非域名根路径下

    非域名根目录下部署,首先肯定要配置publicPath。需要注意的点前面其实已经提过了,就是这种情况下不能使用相对路径./或者空串配置publicPath。为什么呢?原因是它会导致router-link等的表现错乱,使用测试项目[2]分别使用两种配置打包发布,审查元素就能看出区别。在页面上有两个router-link,Home和About:

    Vue项目打包发布问题汇总

    两种配置打包后的结果如下。

    1. publicPath配置为./或者空串:

    2. publicPath配置为/test:

    publicPath配置为相对路径的router-link打包后地址变成了相对根域名下地址,很明显是错误的,所以非域名根路径部署应该将publicPath配置为完整的前缀路径。

    五、结语

    关于Vue项目发布的相关问题就先总结这么多,几乎在每一步都踩过坑才有所体会,有问题欢迎各位同学一起探讨。写博客很累,不过收获也很多,还是要坚持;有时候别人转载自己的原创文章也不标明出处,竟然将写文章日期改得比原创还早,有点心累。本文中使用到的图片都加了个自己的水印,是前端实现的,原理也很简单,之后写一篇简短的文章分享一下。

    参考资料

    [1]

    Vue项目打包发布: https://github.com/Lushenggang/vue-publish-test

    [2]

    Vue项目打包部署测试项目地址: https://github.com/Lushenggang/vue-publish-test

    相关文章

    1. 基于Vue的前端架构,我做了这15点

    2. Vue3的学习记录

    3. 一份很棒的Vue3 学习清单

    最后

    转发文章并关注公众号:前端开发博客,回复 1024,领取前端进阶资料

    1. 回复「电子书」领取27本精选电子书

    2. 回复「加群」加入前端大神交流群,一起学习进步

    3. 回复「Vue」获取 Vue 精选文章

    点赞和在看就是最大的支持❤️

    展开全文
  • vue项目实战】Vue工程化项目--猫眼电影移动端

    万次阅读 多人点赞 2019-04-16 13:42:46
    使用 vue-cli 创建项目。现在先把主框架搭起来,熟悉路由和组件,后面在 项目demo 持续贴出完整项目代码。 vue初始化项目 首先全局安装Vue脚手架——vue-cli npm/cnpm install vue-cli -g 新建一个文件夹vue-demo...

    这里是仿猫眼移动端。使用 vue-cli 创建项目。

    本节先介绍并进行项目的初始化,然后把主框架搭起来,熟悉路由和组件,后面在 项目demo 持续贴出完整项目代码。也会更新博客。

    第二节传送


    2020-02-20 :目前已更新 猫眼升级版 技术栈:vue-cli3 + typescript + axios

    vue初始化项目

    首先全局安装Vue脚手架——vue-cli

    npm/cnpm install vue-cli -g
    

    新建一个文件夹vue-demo,在该文件夹下打开命令窗口,并输入以下命令:

    vue init webpack vuedemo-maoyan	//使用脚手架初始化项目,vueDemo是项目名
    

    然后回车并进行设置
    项目初始化

    这个时候会在文件夹下产生一个名为 vuedemo-maoyan 的项目文件夹
    初始化后项目文件夹
    在该项目文件夹下,打开命令窗口,安装所有依赖包。然后启动开发环境

    # 安装依赖
    npm install
    
    # 启动开发环境
    npm run dev
    

    启动开发环境
    编译完成,访问 http://localhost:8080 ,出现以下界面,则demo初始化成功。
    启动成功界面

    vue项目下各文件夹和各文件的功能描述

    vue项目下各文件夹和各文件的功能描述

    一些代码描述

    webpack.base.conf.js

    路径: bulid

    // webpack.base.conf.js
    module.exports = {
        ...
        resolve: {
            //设置扩展名,如果配置了这个,name在import导入的时候,就不用再写后缀名了
            //使用scss的时候,还可以加上 .css 和 .scss
            extensions: ['.js', '.vue', '.json''.css','.scss'],
    
            //别名配置
            alias: {
                'vue$': 'vue/dist/vue.esm.js',
                '@': resolve('src'),
            }
        }
        ...
    }
    

    在这里插入图片描述在这里插入图片描述

    这里的@指的是路径../src,在webpack.base.conf.js里被封装了。

    main.js

    路径:src

    // main.js
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    /**
     * 其实就是:import router from './router/index.js'
     * 在使用webpack项目中,如果导入index.js,则可以省略
     * 这里是相当于导入了一个路由
     */
    
    // 在生产环境下把注释全部去掉
    Vue.config.productionTip = false
    
    // 是否启动代码质量检查,不要删除
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })
    

    看下图及注释
    在这里插入图片描述

    项目开发

    准备工作

    1. 修改 index.html 文件

      路径: 位于根目录。

      index.html文件需要更改和添加的只有title和meta

      <!DOCTYPE html>
      <html>
          <head>
              <meta charset="utf-8"> 
              <meta name="viewport" content="width=device-width,initial-scale=1.0">
              <!-- 添加的内容 -->
              <meta name="renderer" content="webkit">
              <title>vue工程化-猫眼</title>
          </head>
          <body>
              <div id="app"></div>
              <!-- built files will be auto injected -->
          </body>
      </html>
      

      对新添加的meta标签不理解的,看这里

    2. 修改 App.vue 文件

      路径:src

      删除<img src="./assets/logo.png"><style>标签内的样式

    3. 新建pages文件夹

      在src目录下新建,这个目录模拟单页面开发当中的路由

    开发演示

    1. 在pages文件夹下新建文件 index.vue 并进行简单的编辑

      <template>
        <div>
          <h2>{{pageTitle}}</h2>
          <div>This is a simple page</div>
        </div>
      </template>
         
      <script>
      export default {
        name: "index",
        data() {
          return {
            pageTitle:'测试主页'
          };
        }
      };
      </script>
      
      <style scoped>
      
      </style>
      
    2. 路由的引入、定义

      路径: router

      // index.js
      import Vue from 'vue'
      import Router from 'vue-router'
      // 引入路由
      import index from '@/pages/index'
      
      Vue.use(Router)
      
      export default new Router({
         // routes用来定义路由对象,里面的每一个对象都是一个路由
       routes: [
         {
           path: '/', // 碰到这个路径跳转路由至index
           name: 'index',  // 给这个路由取的一个别名
           component: index // 代表在当前路径下,加载index路由
         }
       ]
      })
      
    3. 在需要加载路由的地方,使用Vue组件 router-view 去加载

      路径: src

      <!-- App.vue -->
      <template>
        <div id="app">
          <router-view/>
        </div>
      </template>
      
      <script>
      export default {
        name: 'App'
      }
      </script>
      
      <style>
      
      </style>
      

      此时页面就已经自动刷新成以下界面:
      演示界面

    4. 组件化开发

      • 在components下新建文件hoting.vue 和comming.vue

        // hoting.vue
        <template>
           <div class="hoting"></div>
        </template>
           
        <script>
        // 导出组件
        export default {
           name:'hoting'
        }
        </script>
        
        <style scoped>
        </style>
        
        // comming.vue
        <template>
           <div class="comming"></div>
        </template>
           
        <script>
        // 导出组件
        export default {
           name:'comming'
        }
        </script>
        
        <style scoped>
        </style>
        
      • 在需要使用组件的地方引入并注册组件

        // index.vue 路径:src/pages
        <template>
          <div>
            <div class="pageTitle">猫眼电影</div>
            <ul class="topNav">
              <li :class="[showHot==1?'active':'']" @click="showHot=1">正在热映</li>
              <li :class="[showHot==0?'active':'']" @click="showHot=0">即将上映</li>
            </ul>
            <div class="main">
              <hoting v-show="showHot==1"></hoting>
              <comming v-show="showHot==0"></comming>
            </div>
            
          </div>
        </template>
           
        <script>
        import hoting from '@/components/hoting'
        import comming from '@/components/comming'
        
        export default {
          name: "index",
          components: {
            hoting,comming
          },
          data() {
            return {
              showHot:1
            }
          }
        };
        </script>
        
        <style scoped>
        /** 其他样式代码已注释,demo有完整代码 **/
        .active{
          color: rgb(229, 72, 71);
          border-bottom: 2px solid rgb(229, 72, 71);
        }
        </style>
        

        现在点击相应的按钮就会跳到相应的界面在这里插入图片描述

    5. 路由跳转(通过路由添加电影详情页)

      • 在路由文件夹pages下新建文件 movieDetail.vue 作为要跳转的详情页

        <template>
        	<div>
        		<h3>欢迎来到电影详情页</h3>
        	</div>
        </template>
        // ...
        
      • 将详情页路由加入到路由对象中

        // index.js  路由:src/router
        import Vue from 'vue'
        import Router from 'vue-router'
        // 引入
        import index from '@/pages/index'
        import movieDetail from '@/pages/movieDetail'
        
        Vue.use(Router)
        
        export default new Router({
          routes: [
            {
              path: '/',
              name: 'index',  
              component: index
            },
            {
            	path:'/movieDetail',
            	name: 'movieDetail',
            	component: movieDetail
            }
          ]
        })
        
      • 在热映和即将上映的页面,添加进入详情页的按钮

        <template>
          <div class="hoting">
            <h3>正在热映的电影</h3>
            <button @click='$router.push({name:"movieDetail"})'>点击进入电影详情页</button>
          </div>
        </template>
        // ...
        

        $router.push() 属于编程式路由

        现在点击按钮 点击进入电影详情页 即可通过路由进入详情页页面(地址栏已经跳到了详情页路由路由跳转

    点这里查看完整demo地址

    点我进入第二节

    展开全文
  • 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>
    
    展开全文
  • vue 项目安装 安装官网:vue 终端安装 环境要求: 安装有 Node.js、 vuevue-cli 。 查看nodejs版本和npm版本,在命令行中输入: node -v npm -v npm更新到最新的版本 npm install -g npm 淘宝 NPM 镜像,大家都...
  • 使用VUE项目管理器新建一个VUE项目

    千次阅读 2020-03-18 17:11:18
    Vue-cli3使用VUE项目管理器新建一个项目 前端技术栈:Vue,Vue-Router,Element-UI,Axios,Echarts Vue-cli3脚手架安装 1.安装node.js 到官网选择对应版本下载link,然后无脑安装 2.安装淘宝镜像 打开命令行窗口 输入...
  • Vue.js教程-Vue项目的目录结构和.vue文件的构成

    千次阅读 多人点赞 2020-07-28 00:59:54
    Vue.js教程-Vue项目的目录结构和.vue文件的构成前言Vue项目的目录结构(Vue-cli3/4版本).vue文件的构成Html区域(template)script区域export default区域style区域总结 前言 本章介绍vue项目的目录结构和一个.vue文件...
  • IDEA启动vue项目

    千次阅读 2020-08-01 15:44:51
    不要使用 import 去引入项目,因为不是传统的项目结构 这样打不开,直接使用open 打开文件夹即可。 一、在IDEA中配置vue插件 点击File–>Settings–>Plugins–>搜索vue.js插件进行安装,下面的图中我已经...
  • 如果要做vue项目开发,需要安装对应的插件。 如果不想安装插件,可以安装另外一个开发工具WebStorm,需要注册码破解。 打开File -> Settings -> Plugins,输入vue,搜索。需要安装NodeJS和Vue.js。安装完成,...
  • 创建VUE项目,2.0版本和3.0版本的区别使用vue2.0版本创建vue项目创建前的准备开始创建创建过程项目正常创建使用vue3.0版本创建vue项目 使用vue2.0版本创建vue项目 你好! 这是你第一次使用 Markdown编辑器 所展示的...
  • 使用vscode运行vue项目

    万次阅读 多人点赞 2020-04-07 16:42:04
    学习完vue环境搭建并创建项目后下面我们介绍使用vscode运行vue项目。!! 文章参考:https://www.csdn.net/gather_29/OtTagg3sNzA2LWJsb2cO0O0O.html 一:下载vscode地址为:https://code.visualstudio.com/ 然后...
  • vue项目ide(vue项目环境搭建)

    千次阅读 2020-07-12 22:08:55
    一、先介绍一下我接下来要做的项目 项目:ide可视化工具 技术应用:  Vue2.0(js框架):https://cn.vuejs.org/  ElementUi(饿了吗ui框架基于vue的):http://element.eleme.io/#/zh-CN  Ecahrts(图表):...
  • vue项目访问顺序

    万次阅读 2019-08-20 16:53:12
    1.vue项目访问顺序 访问index.html后,main.js会将app.vue组件显示,会再通过进入router里的index.js从而进入hello.vue组件.进而展现整个页面。 2.mian.js(项目开始展示内容) import Vue from 'vue' import App from ...
  • win10 nginx部署vue项目 niginx的安装和启停操作参照博客:https://blog.csdn.net/qq_26666947/article/details/112272058 1、打包vue项目 (1)在前端编译工具的终端界面中,使用命令:npm run build,对vue项目...
  • 如何搭建一个vue项目(完整步骤)

    万次阅读 多人点赞 2020-06-27 08:07:25
    检查是否安装成功: 二、搭建vue项目环境 1、全局安装vue-cli npm install --global vue-cli 2、进入你的项目目录,创建一个基于 webpack 模板的新项目: vue init webpack 项目名 说明: Vue build ==> 打包方式...
  • yarn启动vue项目

    万次阅读 2020-07-27 08:40:15
    1 安装依赖 yarn install 2 运行 yarn run serve 3 编译 yarn run build
  • nginx部署vue项目(成功版)

    千次阅读 2020-12-01 16:57:53
    3、打包vue项目 4、把vue项目安装到nginx 5、修改nginx配置文件 6、启动、关闭nginx 7、报错及解决 1、nginx介绍 nginx是一个高性能的HTTP和反向代理服务器。因此常用来做静态资源服务器和后端的反向代理...
  • idea中启动vue项目

    万次阅读 多人点赞 2019-12-27 16:25:54
    想使用vue必须先安装node.js : Node.js下载 安装直接全部点击下一步最后完成安装 安装结束后打开cmd命令窗口 输入以下命令验证是否安装成功,如出现版本号则安装成功 node -v npm -v 安装成功后,在cmd命令窗口使用...
  • 如何用宝塔面板将vue项目打包部署

    千次阅读 2021-01-30 12:59:17
    想起来之前搭建的个人博客很久没打理,以现在的技术去看之前写的博客,实在是一言难尽,虽然我当初写完个人博客1.0的时候觉得还不错,花费了几天的时间把个人博客2.0部署后,我打算写一篇如何部署vue项目的文章,看...
  • 使用tomcat部署vue项目

    千次阅读 2020-07-13 12:40:17
    1 首先需要修改vue项目中的Route中的index.js文件,新增mode:‘history’,base:’/vue/' export default new Router({ routes: [{ path: '/', mode:'history', base:'/vue/', name: '', component: login, ...
  • VSCode如何运行Vue项目

    千次阅读 2020-11-10 22:25:17
    1:首先还是需要我们利用vue-cli脚手架搭建空vue项目,这个我就不赘述了 2:打开VSCode下载vetur插件 点击左侧圈起来的图标打开拓展插件,在顶部搜索框搜索vetur插件进行下载安装即可。 下载安装完后就会在扩展列表...
  • nodejs运行vue项目

    千次阅读 2020-04-23 16:59:46
    --cnpm) 命令:npm install -g cnpm --registry=http://registry.npm.taobao.org(如下图) 6、npm安装vue-cli 命令:cnpm install -g vue-cli (命令中 -g 表示全局安装) 7、运行vue项目(分两种情况:已有项目和...
  • 如何查看Vue项目vue的版本号

    千次阅读 2020-10-07 11:26:22
    如果是用vue-cli创建的项目,则找到项目根目录下的"package.json"文件 如果是要查看vue-cli的版本号的话,则键盘Win+R,输入cmd,再在cmd里面输入vue -V
  • 使用 npm 启动vue项目

    千次阅读 2020-09-23 17:17:46
    在cmd中找到vue项目存放的路径,例如我是在E盘根目录下创建了一个名为vue01的项目,首先在cmd中输入 "E:" ,然后按回车,然后输入 "cd vue01" ,按回车,然后输入 "npm run dev" ,按回车,然后发现npm就启动成功了...
  • vue项目启动流程

    千次阅读 2019-09-24 17:26:17
    Vue项目执行npm run dev启动项目后,开发环境首先会去找到webpack.dev.conf.js文件,这里配置了启动项目的服务,启动端口之类的: webpack.dev.conf.js下面引入了这两个文件 执行npm run dev或者npm run ...
  • Vue项目启动原理及项目的创建

    万次阅读 多人点赞 2018-06-08 13:29:40
    首先看下图:一般一个初步的Vue项目创建好之后都会有这三个文件:index.html 、main.js 、App.js;1、index.html :众做周知,Vue是单页面形式开发,而这个index.html文件在其中起着特别重要的作用。所有组件(后缀名...
  • vue项目编译与运行

    千次阅读 2020-07-31 23:04:22
    那么从码云或github上下载的vue项目在本地如何看效果呢,这里记录一下搭建的过程,方便之后的查看。之前本地电脑还安装了node.js的环境,这里不再说明,具体可以参考网上的教程。 1、安装npm 有时候用npm下载依赖,...
  • Vue Cli3构建Vue+ant design vue项目编辑器需添加插件:浏览器需添加插件: 编辑器需添加插件: 前提:我使用的是vs code编辑器。 1、beautify——代码格式化。 2、vetur——支持.vue文件的语法高亮显示、自动完成等...
  • 使用IDEA创建第一个VUE项目(详细步骤)

    千次阅读 多人点赞 2020-08-26 15:22:13
    使用IDEA创建咱们的第一个VUE项目 最近在学习VUE,想着使用vscode、hbulider、webstorm这些软件学习,但听前端前辈们说要很多插件什么的等等等!听完咱还是选择IDEA吧,毕竟和IDEA还是很亲近的! 1.安装环境–让VUE...
  • vue项目开发实战案例

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

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 374,120
精华内容 149,648
关键字:

vue项目

vue 订阅