Python学习之路---前端---Vue实践

Vue项目实践

一、如何创建一个新的项目

1、检查是否安装npm(包管理工具)；

以管理员方式运行CMD，命令检测 npm是否存在

2、以全局方式下载安装vue-cli

npm install -g vue-cli截图命令不一样是因为使用的是淘宝镜像，速度比较快。

3、创建一个项目的文件存储位置，并cd进去

vue init webpack-simple

4、跟着指示，接着运行命令 npm install

5、运行项目：npm run dev

6、我们仅需关系，目录中的src即可，其他文件不需要关心。

二、创建组件的基本步骤

-node_modules：项目的依赖

-public
  -favicon.ico 网页的图标
  -index.html  主页面
-src：我们需要关注的
  -assets：方静态文件
  -components：小组件
  -views ：页面组件
  -App.vue ：主组件
  -main.js ：项目主入口js
  -router.js： 路由相关，以后配置路由，都在这里配置
  -store.js ：vuex相关，状态管理器

-package.json  项目的依赖文件

1、在src目录创建一个存放组件的目录；

2、创建组件文件，如test.vue

3、组件内容编写

3.1、每一个VUE组件的基本组成部分

<!--每个vue组件都由三部分组成-->
<!--第一部分：template  用于存放HTML标签,记住不能存在两个平级的大标签-->
<template>
  <div>
<!--  大标签内可以存在平级的标签-->
    <div></div>
    <div></div>
  </div>
<!--  不能存在两个平级的大标签-->
<!--  <div></div>-->
</template>
<!--第二部：script 里面不能添加type类型-->
<script>
export default {
  name:'组件名', // 虽然没什么用，但是起一个便于识别这个组件是干什么的也是很不错的
  data(){  //记住组件的创建规则，data必须是函数，且必须有一个返回值，即便这个返回值是空的。
    return{
    }
  },
  methods:{

  },
  computed:{

  },
  components:{
    //这个目录添加的是里面的映入的子对象，用逗号分隔。
  }
}
</script>
<!--第三部分 style 用于储存css样式，记住要添加一个scoped 属性，不添加的话，这个样式会影响到全局-->
<style scoped>

</style>

4、引入并且加载创建的组件（以修改App.vue为例）

我们先清空里面的内容，自己按照步骤3重新编写一次，然后观察localhost:8080页面

<!--每个vue组件都由三部分组成-->
<!--第一部分：template  用于存放HTML标签,记住不能存在两个平级的大标签-->
<template>
  <div>
<!--  大标签内可以存在平级的标签-->
    <h1>这是首页</h1>
  </div>
<!--  不能存在两个平级的大标签-->
<!--  <div></div>-->
</template>
<!--第二部：script 里面不能添加type类型-->
<script>
export default {
  name:'index', // 虽然没什么用，但是起一个便于识别这个组件是干什么的也是很不错的
  data(){  //记住组件的创建规则，data必须是函数，且必须有一个返回值，即便这个返回值是空的。
    return{
    }
  },
  methods:{

  },
  computed:{

  },
  components:{
    //这个目录添加的是里面的映入的子对象，用逗号分隔。
  }
}
</script>
<!--第三部分 style 用于储存css样式，记住要添加一个scoped 属性，不添加的话，这个样式会影响到全局-->

<style scoped>

</style>

4.1、子组件的引入和加载

注意查看 script标签里的内容（包含引入和加载），以及template中的步骤（展示加载的子组件）

<!--每个vue组件都由三部分组成-->
<!--第一部分：template  用于存放HTML标签,记住不能存在两个平级的大标签-->
<template>
  <div>
<!--  大标签内可以存在平级的标签-->
    <h1>这是首页</h1>
<!--    步骤3  展示子组件-->
    <test></test>
  </div>
<!--  不能存在两个平级的大标签-->
<!--  <div></div>-->
</template>
<!--第二部：script 里面不能添加type类型-->
<script>
//步骤一： 引入子组件 import 子组件名 from "子组件存放目录"
import test from "./components/test"

export default {
  name:'index', // 虽然没什么用，但是起一个便于识别这个组件是干什么的也是很不错的
  data(){  //记住组件的创建规则，data必须是函数，且必须有一个返回值，即便这个返回值是空的。
    return{
    }
  },
  methods:{

  },
  computed:{

  },
  components:{
    //这个目录添加的是里面的映入的子对象，用逗号分隔。
  //  步骤二：加载子组件
    test,
  }
}
</script>
<!--第三部分 style 用于储存css样式，记住要添加一个scoped 属性，不添加的话，这个样式会影响到全局-->

<style scoped>

</style>

三、Vue实例

实例需要实现的内容

1、布局一个简单的页面；
2、添加一个导航栏；
3、添加一个轮播图；
4、添加一个音乐播放器；