vue-cli全集（父子组件传值、axios）

已于 2022-04-03 11:21:38 修改
阅读量522 收藏
点赞数
分类专栏： 前端 文章标签： vue
于 2021-08-21 23:49:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42148729/article/details/119846930
版权

文章目录

1、课程简介

  • 平台无关性、功能更齐全

  • 占内存少、更高效

  • 帮助我们写好vue基础代码的工具，也是行业内通用的工具

  • Vue-cli家族成员及存在的意义

  • 使用Vue-cli2搭建项目

  • 使用Vue-cli3搭建项目及调试

  • 使用Vue-cli3完成项目案例

  • Vue-cli家族成员：cli2、cli3

    • Command-Line Interfance：又称命令行界面或字符用户界面

  • Vue-cli2搭建项目

    • cli2全局安装并创建项目、文件结构、文件模板、边学边练项目案例

  • Vue-cli3使用详解

    • cli2升级cli3，快速原型开发、cli3的项目管理、测试、定制开发

  • Vue-cli3项目案例

    • 使用cli3创建项目案例，并进行单元测试等

2、vue-cli2脚手架

2-1、node.js环境安装

  • 什么是前台、后台
  • 什么是前端、后端
  • http://nodejs.cn
  • 配置环境变量Path、node安装位置
  • 变量值最前面加入：C:\Program Files\nodejs;
  • 常见的dos命令
    • cd 打开文件夹
    • md 创建文件夹
    • dir 查看文件夹内容
    • cd… 返回上一级文件夹

2-2、npm安装及参数设置（1）

  • npm与cnpm的区别
    • npm（node package manager）是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）
    • cnpm：因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，所以我们乐意分享的淘宝团队分享了使用国内镜像来代替国外服务器
  • -g参数
    • 全局安装（global），可以在命令行下直接使用
    • 可以通过npm root -g查看全局安装的文件夹位置
  • vue-cli2安装
    • npm install -g vue-cli
    • cnpm install -g vue-cli
  • 通过镜像服务器获取资源
    • npm install -gd express --registry=http://registry.npm.taobao.org
    • 为了避免每次安装都需要–registry参数，可以使用如下命令进行永远设置
    • npm config set registry http://registry.npm.taobao.org

2-3、npm安装及参数设置（2）

  • -S，-D参数
    • -S，–save安装包信息将加入到dependencies（生产阶段的依赖）
    • -D，–save–dev安装包信息将加入到devDependencies（开发阶段的依赖）
    • i是install的缩写（前面没有-）
  • npm i -gD vue-cli
  • npm root -g
  • /usr/local/lib/node_modules
  • npm init -f

2-4、cnpm和vue-cli2安装

  • cnpm
    • npm install -g cnpm --registry=http://registry.npm.taobao.org
    • cnpm i -gD vue-cli
    • vue -V
    • @vue/cli 4.5.11

2-5、创建vue-cli2项目

image-20210819231943537

image-20210819232850565

2-6、更改vue-cli2的helloword

  • npm config set registry https://registry.npm.taobao.org
  • 更改镜像 vue ui 速度变快
  • 将vuecli的首页改为显示自定义的helloworld
first.vue
<template>
    <div>
        first.vue
    </div>
</template>

<script>

</script>

<style scoped>

</style>

在图片描述

App.vue
<router-link to="/first">First</router-link> |

router > index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import First from '../components/first.vue'

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/first',
        name: 'First',
        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({
    routes
})

export default router

main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

2-7、配置语法高亮显示

1、虽然设置过淘宝镜像 npm install-g cnpm --registry=https://registry.npm.taobao.org

但是通过 vue init webpack projectName新建项目是和淘宝镜像没关系的，因为vue-cli 用的是 npm 源，所以只要设置 npm 源就行了，可以提升创建速度：

npm config set registry https://registry.npm.taobao.org

2、拉取 2.x 模板 (旧版本)

Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

3、vue create prjectName

4、引入路由、修改路由

5、https://github.com/vuejs/vue-syntax-highlight

6、vscode里面vue cli 编译sass提示这个错误

sass-loader的版本过高导致的编译错误、npm uninstall sass-loader（卸载当前版本）

npm install sass-loader@7.3.1 --save-dev 即可

2-8、router实现页面跳转

App.vue
<template>
    <div id="app">
        <div id="nav">
            <router-link to="/first">首页</router-link> |
            <router-link to="/">我的</router-link> |
            <router-link to="/about">关于</router-link>
        </div>
        <router-view />
    </div>
</template>

<router-link to="/first">首页</router-link>

<router-view />

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import First from '../components/first.vue'

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/first',
        name: 'First',
        component: First
    },
    {
        path: '/about',
        name: 'About',
        component: () => import('../views/About.vue')
    }
]

const router = new VueRouter({
    routes
})

export default router

2-9、router实现子路由（1）

  • 嵌套路由 一级组件 二级组件 三级组件

2-10、router实现子路由（2）

2-11、为什么不用#号

  • 地址栏中，经常出现#，是什么作用，能不能去掉#
  • hash模式：地址栏包含#符号，#以后的不能被后台获取
  • history：具有对url历史记录进行修改的功能
  • 在微信支付、分析url作为参数传递时，#不能满足需求
  • history需要后台配合，处理404的问题
const router = new VueRouter({
    mode: 'history',
    routes
})

2-12、单独安装eslint

  • npm install eslint --save、生产环境
  • npm uninstall eslint --save
  • npm i eslint --save-dev、开发环境

2-13、导入其他项目添加依赖并运行

  • 怎么导入vue-cli项目
  • npm install
  • npm run serve

2-14、居中怎么实现的（主组件的样式设置）

2-15、阶段小结

  • 学习了vuecli基本的文档结构，掌握页面跳转的基本方法
  • 学习了cli2的组件安装、卸载等

3、vue-cli3脚手架

3-1、手动搭建vue-cli环境（1）

  • 安装依赖：npm install 或者 cnpm install
  • 初始化：npm init -f 或者 cnpm init -f
  • 安装组件，并查看安装后的内容
  • npm i vue-router -D
  • npm i eslint -D

3-2、手动搭建vue-cli环境（2）

  • cnpm install
  • cnpm init -f

3-3、卸载vue-cli2

  • 卸载vue-cli2：npm uninstall vue-cli -g

3-4、安装vue-cli3

  • 普通安装vuecli3：npm install -g @vue/cli
  • 淘宝镜像安装vuecli3：cnpm install -g @vue/cli

3-5、vue-cli3图形界面先睹为快

  • vue ui

3-6、vue-cli3创建项目

  • vue create vue-test3

  • npm run serve

  • 默认 or 手动

  • 选择依赖、插件

  • Yes history

  • In package.json

  • y

3-7、vue-cli3第一个welcome

3-8、vue-cli3导入其他项目并运行

  • cnpm install

3-9、vue-cli3项目案例效果（1）

3-10、vue-cli3项目案例效果（2）

3-11、vue-cli3添加样式的三种方法

4、收官小案例

4-1、vue-cli3项目案例需求分析

  • 组件及组件间传值
  • axios实现读取json数据：商品的数据源存于json中
  • css相关技术进行布局：布局、间距等样式
  • 使用views页面及级组件：使用router设置页面

4-2、vue-cli3项目案例-创建项目

  • vue create proj

4-3、vue-cli3项目案例-页面初始化及banner图片显示

  • 自定义首页
First.vue
<template>
    <div class="main">
        <div class="left"></div>
        <div class="right">
            <div class="top">
                <img src="../../public/img/title.jpg" alt="">
            </div>
            <div class="buttom"></div>
        </div>
    </div>
</template>

4-4、vue-cli3项目案例-完成页面布局效果

First.vue
<template>
    <div class="main">
        <div class="left">1</div>
        <div class="right">
            <div class="top">
                <img src="../../public/img/title.jpg" alt="">
            </div>
            <div class="buttom"></div>
        </div>
    </div>
</template>

<style type="text/css">
    *{
        margin: 0;
        padding: 0rem;
    }
    .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;
    }
    .left,.right{
        background-color: blue;
        height: 500px;
    }
</style>

4-5、vue-cli3项目案例-导航设置（1）

Left.vue
<template>
    <div class="">
        <div class="title">热门推荐</div>
        <ul>
            <li>笔记本电脑</li>
            <li>手机</li>
            <li>笔记本电脑</li>
            <li>手机</li>
            <li>笔记本电脑</li>
            <li>手机</li>
            <li>笔记本电脑</li>
            <li>手机</li>
        </ul>
    </div>
</template>

<style scoped>

</style>

First.vue
<template>
    <div class="main">
        <div class="left">
            <Left></Left>
        </div>
        <div class="right">
            <div class="top">
                <img src="../../public/img/title.jpg" alt="">
            </div>
            <div class="buttom"></div>
        </div>
    </div>
</template>
<script>
    import Left from '../components/Left.vue';

    export default{
        components:{
            Left
        }
    }

</script>

4-6、vue-cli3项目案例-导航设置（2）

<template>
    <div class="">
        <div class="title">热门推荐</div>
        <ul class="menu">
            <li>笔记本电脑</li>
            <li>手机</li>
            <li>服饰</li>
            <li>手表</li>
            <li>书籍</li>
            <li>玩具</li>
            <li>小家电</li>
            <li>学习用品</li>
            <li>办公用品</li>
            <li>旅游必备</li>
            <li>游戏卡通</li>
        </ul>
    </div>
</template>

<style scoped>
    .title{
        width: 100px;
        color: red;
    }
    .menu li{
        list-style: none;
        height: 50px;
        margin-bottom: 2px;
        background-color: white;
        line-height: 50px;
    }
</style>

4-7、vue-cli3项目案例-右侧内容设置（1）

<template>
    <div class="main">
        <div class="left">
            <Left></Left>
        </div>
        <div class="right">
            <div class="top">
                <img src="../../public/img/title.jpg" alt="">
            </div>
            <div class="buttom">
                <Right></Right>
            </div>
        </div>
    </div>
</template>

<style type="text/css">
    *{
        margin: 0;
        padding: 0rem;
    }
    .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;
    }
    .left,.right{
        background-color:#f5f5f5;
        height: 500px;
    }
</style>
<script>
    import Left from '../components/Left.vue';
    import Right from '../components/Right.vue';

    export default{
        components:{
            Left,
            Right
        }
    }

</script>

4-8、vue-cli3项目案例-实现导航效果（2）

Vue事件总线(EventBus)使用详细介绍

<script>
    // ./ 上一级
    import Msg from './msg.vue';

    export default{
        methods: {
            menu1(){
                Msg.$emit('val','1')
            },
            menu1(){
                Msg.$emit('val','2')
            }
        },
    }
</script>

4-9、vue-cli3项目案例-右侧内容设置（3）

4-10、vue-cli3项目案例-右侧内容设置（4）

4-11、vue-cli3项目案例-右侧列表显示（1）

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')

msg.js
import Vue from 'vue'
export default new Vue

4-12、vue-cli3项目案例-右侧列表显示（2）

goodList.vue
<template>
    <div name="show">
        <ul class="goodList">
            <li v-for="good in list">
                <img v-bind:src="good.img" />
                <p>{{good.goodName}}</p>
            </li>
        </ul>
    </div>
</template>


<style>
    .goodList li {
        width: 200px;
        height: 200px;
        list-style: none;
        float: left;
        color: red;
        font-size: 9px;
        margin-bottom: 30px;
    }

    .goodList img {
        width: 180px;
        height: 180px;
    }
</style>
<script>

    
    import { watch } from "fs";
    export default {
        name: "show",
        data() {
            var that = this;
            console.log('that',that);
            
            var url = ""
            if (that.goodId == 1) {
                url = "json/bijiben.json";
            } else if (that.goodId == 2) {
                url = "json/shouji.json";
            } else {
                url = "json/shouji.json";
            }
            that.$http.get(url).then(function (res) {
                console.log(res);
                that.list = res.data;
            });
            return {
                list: []
            };
        },
        /*
            <div v-if="kk==1">
                <GoodList :goodId="1"></GoodList>
            </div> 
        */
        props: {
            goodId: Number
        },
        watch: {
            goodId() {
                var that = this;
                var url = "";
                if (that.goodId == 1) {
                    url = "json/bijiben.json";
                } else if (that.goodId == 2) {
                    url = "json/shouji.json";
                } else {
                    url = "json/shouji.json";
                }
                that.$http.get(url).then(function (res) {
                    that.list = res.data;
                });
                return {
                    list: []
                };
            }
        }
    };
</script>

4-13、vue-cli3项目案例-右侧列表显示（3）

that.$http.get(url).then(function (res) {
  console.log(res);
  that.list = res.data;
});

4-14、vue-cli3项目案例-右侧列表显示（4）

Right.vue
<!-- 父传子数据 -->
<GoodList :goodId="1"></GoodList>

goodList.vue
<template>
    <div name="show">
        <ul class="goodList">
            <li v-for="good in list">
                <img v-bind:src="good.img" />
                <p>{{good.goodName}}</p>
            </li>
        </ul>
    </div>
</template>
<script>
    import { watch } from "fs";
    export default {
        name: "show",
        data() {
            var that = this;
            console.log('that',that);
            
            var url = ""
            if (that.goodId == 1) {
                url = "json/bijiben.json";
            } else if (that.goodId == 2) {
                url = "json/shouji.json";
            } else {
                url = "json/shouji.json";
            }
            that.$http.get(url).then(function (res) {
                console.log(res);
                that.list = res.data;
            });
            return {
                list: []
            };
        },
        /*
            <div v-if="kk==1">
                <GoodList :goodId="1"></GoodList>
            </div> 
        */
        props: {
        		// 父组件传过来的  
            goodId: Number
        },
      	// 监听数据改变
        watch: {
            goodId() {
                var that = this;
                var url = "";
                if (that.goodId == 1) {
                    url = "json/bijiben.json";
                } else if (that.goodId == 2) {
                    url = "json/shouji.json";
                } else {
                    url = "json/shouji.json";
                }
                that.$http.get(url).then(function (res) {
                    that.list = res.data;
                });
                return {
                    list: []
                };
            }
        }
    };
</script>

4-15、vue-cli3项目案例-右侧列表显示（5）

4-16、vue-cli3项目案例-右侧列表显示（6）

5、课程总结

  • vuecli2和vuecli3的安装、卸载、插件的安装、卸载
  • 了解重点文件及结构
  • 实现页面路由、路由嵌套、插件安装等内容
  • 项目案例
互联网小队
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【精讲】vue框架 axios请求（内含模拟数据交互部分）入门
m0_59505309的博客
08-17 785
【精讲】vue框架 axios请求（内含模拟数据交互部分）等详细内容入门
vue-cli 引入、配置axios的方法
08-27
主要介绍了vue-cli 引入axios的方法,文中还给大家提到了vue-cli 配置axios的方法，非常不错，具有参考借鉴价值，需要的朋友可以参考下
vue3父子组件数据传递
qq_40787608的博客
03-21 1171
vue3父子组件数据传递
vue3中父组件向子组件传递数据
qq_63736937的博客
04-12 3631
小新的解说现场~
Vue：extends继承&组件复用性
席木木的博客
02-19 7419
Vue：extends继承&组件复用性，首先回顾了Vue.js中创建组件实例的几种方式，进而讨论了如何提升单个组件复用性的几种可行方案，最后介绍了Vue的extends选项——如何通过继承提升组件复用性，并介绍了此种方法的不足之处。
Vue axios基础
一夜星尘
10-10 5630
npm config set registry https://registry.npmmirror.com npm config get registry npm install [name]
vue项目常用组件和框架结构介绍
08-28
Vue 项目常用组件和框架结构介绍 在本文中，我们将对 Vue 项目的骨架及常用组件进行详细的介绍，涵盖了 Vue 项目的基础结构、常用组件、框架结构等方面的知识。 Vue 项目基础结构 一个 Vue 项目的基础结构可以...
VUE实战开发.pptx
08-04
本课程涵盖了VUE框架的各个方面，包括VUE的安装、数据驱动和双向绑定、模板语法、事件处理、表单控件、计算属性、监听、全局组件、过滤、父子组件传值、兄弟组件传值、动态切换组件、 lifesycle 等。 第一章：VUE...
vue.js视频教程及源码（一）
10-19
第二十一节：Ajax框架vue-resource&axios 第二十二节：过渡&动画 第二十三节：vue Router路由基本使用 第二十四节：vue Router嵌套路由 第二十五节：vue Router路由缓存 第二十六节：vue Router路由组件传参 第二十...
Vue学习.pdf（Vue学习个人笔记资料-菜鸟入门）
11-20
Vue-Cli是官方提供的脚手架工具，简化了Vue项目的初始化和构建过程。它基于Node.js，通过npm（Node包管理器）安装，可以快速生成项目骨架，自动配置Webpack等构建工具。 Vue-router是Vue的官方路由库，用于管理应用...
vue.js视频教程及源码（二）
10-19
第二十一节：Ajax框架vue-resource&axios 第二十二节：过渡&动画 第二十三节：vue Router路由基本使用 第二十四节：vue Router嵌套路由 第二十五节：vue Router路由缓存 第二十六节：vue Router路由组件传参 第二十...
VUE：关于父组件获得axios数据传给子组件空值问题//关于在div中直接展示html内容问题
weixin_65846728的博客
02-02 428
computed是计算属性，是一种属性值，主要是计算，依赖于定义的属性和props属性，有缓存，效率高，资源用的少，（不知道能不能操作dom，没实验，但是网上好像说最好还是在mounted中操作dom），有返回值。首先父组件在mounted中发送axios请求获得数据进行赋值，在父组件mounted运行完之后才会运行子组件的mounted方法，所以假如在子组件里取值或者操作dom得到的都是空值。watch监听一个属性的变化，该属性必须时定义的或者props的，变化后需要重新渲染dom，没有返回值。
【Vue-cli子组件创建及使用】
a_shun66的博客
12-17 360
Vue-cli子组件创建及使用子组件创建及使用导入子组件的注意事项： 子组件创建及使用 在components下创建子组件 在App.vue父组件中引入子组件 导入子组件的注意事项： @表示从src资源文件夹开始查找 import child from “@/components/child.vue”; 相对路径一定要加./ import child from “./components/child.vue”; ...
前端-子组件向父组件共享数据以及vue-cli的使用
navylhjjlh的博客
07-24 292
前端-子组件向父组件共享数据以及vue-cli的使用
Vue 学习 第六篇 axios
YCHH1的博客
06-09 609
axios
vue-cli 组件的使用
FOR.GET
11-01 1302
一、组件化
vuecli组件嵌套iframe页面相互传值
生如夏花S的博客
01-15 5884
一、从头部组件向兄弟组件内的子页面传值  在头部弹框更改头像，用中央事件总线向兄弟组件传值 在组件内都引入import Bus from '../bus' bus.vue : import Vue from 'vue' const Bus = new Vue(); export default Bus; 1. first.vue点击事件传命令： import Bus from ...
详细讲解vuecli中的vue组件化与父子通信
qq_43851684的博客
02-22 190
1 简介 vuecli 中提供一种简单的方式进行组件化开发。 注意 引入 js 模块和引入 vue 模块是不一样的。引入 js 模块是全局引入，而引入 vue 模块是局部引入。在不同模块下引入相同的 js 模块，当修改js模块中的变量时，会在全局影响，所有引入该模块的文件都能察觉该改动。但是修改 vue 模块中的变量，是不会影响全局的。 2 定义组件 组件可以使用ES6模块化规范的写法，通过 import 引入其他vue或者js模块。 data 部分必须是方法而不是json对象！ <te
Vue核心知识-Vue的组件之组件的继承
weixin_34259159的博客
09-07 1830
用法 Vue.extend( options ) 参数： {Object} options 用法： 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。 data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数 Vue实例使用 extend，属性的合并 下例中， 通过 propsData 对 props 进行设置。 设置 data 可直接对组件中的 ...
vue3 v-model父子组件传值
最新发布
01-31
在Vue 3中，v-model的父子组件传值方式有所改变。在Vue 2中，v-model是一个语法糖，实际上是通过props和emit来实现父子组件之间的双向绑定。而在Vue 3中，v-model被重新设计为一个指令，它可以直接在子组件上使用。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

互联网小队

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值