vue之项目

昨日回顾

# 1 计算属性
	computed：写函数，函数名就可以当变量使用
    以后页面再刷新，只有该函数内部使用值变化，函数才重新运算
# 组件
	-局部和全局
    -以后每一个组件就是一个 xx.vue
    	-自己的html，css，js
# 组件间通信
	-自定义属性：父传子
    	props
    -自定义事件：子传父
    	this.$emit(事件名,参数)
    -ref属性：
    	-普通标签
        -放在组件上
        	this.$refs.名字  # 组件对象
# 动态组件
	动态保存
	 <keep-alive>
        <component :is="who"></component>
    </keep-alive>

今日内容

1 插槽

# 在定义组件是，预留一个地方使用标签 <slot></slot> 占位，写在template里面
# 以后在父组件中的子组件的标签内部写  内容，html内容  就会被替换到<slot></slot>中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
<!--    正常‘我是迪迦’不会显示-->
    <child>我是迪迦</child>
    <ccc>我是局部迪迦</ccc>

</div>

</body>
<script>
    Vue.component('child', {
        // 加了这个相当于占位，
        template: `
            <div>
                <button>点我</button>
                <slot></slot>
                <button>别点我</button>
            </div>
        `,
        data() {
            return {}
        }
    })

    var vm = new Vue({
        el: '.app',
        data: {},
        components: {
            'ccc': {
                template: `
            <div>
                <button>局部点我</button>
                <slot></slot>
                <button>局部别点我</button>
            </div>
        `,

            }
        }
    })
</script>
</html>

2 vue-cli创建vue项目

# 创建vue项目，需要使用vue-cli ，vue脚手架：程序项目的骨架，只需要在固定位置写代码即可
# vue-cli需要基于nodejs，安装
# python                             node
  python 解释器   pip安装模块          node命令（解释器）  npm安装第三方模块
    
    
# node是一个后端语言：解释型---》解释器
# 浏览器中有js的解释器
# Chrome V8 引擎 + 底层库(c:网络操作，文件操作，数据库操作。。。)



######## vue-cli环境搭建
# node下载地址，一路下一步
https://nodejs.org/zh-cn/download/
# 安装完成，会自动加入环境变量，释放两个可执行文件  node npm
npm命令安装模块，可能会很慢，就想pip install 很慢（国外），pip换源
npm换源：阿里写了一个npm命令替换的命令  cnpm

# 安装vue-cli
- 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
    
- 安装脚手架：以后使用cnpm替换npm即可
cnpm install -g @vue/cli

- 清空缓存处理（安装失败时候执行）
npm cache clean --force


# 使用vue-cli创建vue项目
	-方式一:命令行
        -vue create myfirstvue
        -看下图
    -方式二：图形化界面
    	-vue ui  # 启动了一个服务，使用浏览器就能范围这个服务，在浏览器中创建项目

3.使用vue-cli创建vue项目

3.1方式一:命令行方式

3.1.1创建项目

3.1.2 选择版本

3.1.3选择属性

3.1.4用哪个版本选哪个

3.1.5第三方依赖

3.1.6 之前记录是否保存

3.1.7 保存成什么东西

3.1.8看到如下即为成功

3.2方式二：图形化界面

vue ui #启动一个服务 在浏览器就可以创建项目 和命令行基本一样

4 vue项目目录结构

# 使用编辑器打开----》pycharm
# 使用vue-cli创建的项目其实是从远程（git）拉下一个空项目

# 目录结构
myfirstvue     # 项目名字
	node_modules # 该项目的依赖包，类似于python venv文件夹，可以删掉（再安装），把项目给别人时，这个要删掉，小文件太多，copy特别慢，
    public  # 文件夹，不要改
    	-favicon.ico # 小图标，网站图片
		-index.html  # 以后不会动，单页面开发的html页面
    src     # 以后写代码的地方#####（重要）
    	-assets  # 静态资源，图片，js，css，都放在这
        -components # 组件，以后写的非页面组件，放在这
        	-HelloWorld.vue  # 官方提供的一个组件
        router   # 第三方模块路由，就会创建出一个文件夹，index.js
        	-index.js
        store    # 第三方模块vuex ，就会有
        	-index.js 
        views # 页面组件
        	-About.vue   # 页面组件
		   -Home.vue
        App.vue     # 根组件，基本不动
        main.js     # 整个项目的入口
    .gitignore      # 忽略：git的忽略文件
    babel.config.js # 高版本语法转换
    package.json    # 存放使用的第三方模块的文件，不要删除
    package-lock.json
    README.md       # 关于项目的介绍文档

5 vue项目的启动与停止

# 方式一，在项目路径下 cmd下启动     使用node起了一个web服务，监听8080端口，开发阶段这么用
	-npm run serve
    -访问：http://192.168.12.34:8080/
	-ctrl+c 停止
    
# 方式二：使用编辑器
	配置npm
    
	配置npm后，点击绿色箭头启动

6 es6之导入导出语法

# 以后再写组件，如何写
	- 创建一个 xx.vue
    -创建完有三部分
    	-<template>写原来用反引号引起来的 html</template>
        -<script>写js的代码</script>
         export default {
            name: "Login",
            data(){
                return {}
            },
             methods:{}
        }
        -<style>写css的类</style>
        
        
        
 # 导入导出语法
	-导出语法
    	一个key 一个value
    	export default {'showName': showName, 'name': name}
     -导入：
    	import 起一个名字 from '../zhang'   // zhang代指的就是导出的对象，以后使用zhang. 调用即可
        
     -文件夹下如果有index.js   导入的时候，就不需要写 index.js,导到包这一层就可以了
    
    
 # 页面组件中使用子组件
	-编写一个xx.vue ,写好html，css，js
    -在要使用的地方，导入，注册 局部组件
    import Header from "../components/Header";
    components:{
            Header
        }
    -在templates标签中之间根据名字使用即可

7 vue项目中axios的使用

# 步骤
	-安装  cnpm install -S axios
    -在组件中导入
      import ajax from 'axios'
    -使用
      created() {
          //因为起名字叫做ajax了 所以使用ajax
            ajax.get('http://127.0.0.1:5000/').then(res => {
                console.log(res.data)
            })
        },

8 vue项目中elementui的使用

# 步骤
	-安装 npm i element-ui -S
    -配置main.js
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI);
    -在组件中使用
    	复制好看的代码过来即可
posted @   迪迦张  阅读(30)  评论(0)  编辑  收藏  举报
相关博文：
· vue简单介绍、应用
· vue_之计算属性、组件化开发、ref属性、动态化组件
· vue之创建项目、定义并使用组件、elementui的使用、与后端交互
· 5-vue-cli创建vue项目
· vue day05
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）
点击右上角即可分享
微信分享提示