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

Posted 互联网小队

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue-cli全集（父子组件传值axios）相关的知识，希望对你有一定的参考价值。

文章目录

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项目

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的安装、卸载、插件的安装、卸载
  • 了解重点文件及结构
  • 实现页面路由、路由嵌套、插件安装等内容
  • 项目案例

以上是关于vue-cli全集（父子组件传值axios）的主要内容，如果未能解决你的问题，请参考以下文章

Vue-Cli—04.父子组件传值祖孙组件传值兄弟组件传值

vue-cli 中使用父子之间传值_父组件传值子组件_封装button按钮

vue父子组件之间传值

vue父子组件之间的通信

React 父子组件传值

uniapp 父子组件传值