vue入门实战（一）新建项目、加入组件、调用方法

一、新建一个vue工程
1.新建文件夹
2.用vscode打开此文件夹
3.打开终端-新建终端
4.执行指令:

npm init vue@latest

二、引入bootstrap
（可以不引入，看你的开发习惯）
1.输入指令

npm install bootstrap

2.找到index.html，引入css和js

 <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
 <script type="module" src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

路径在文件夹里找到对应文件
三、首页开发
（由于本次只做一个小功能，直接写在首页即可）
1.找到App.vue
2.去掉其他内容，只留一个Helloworld

import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
import 'ant-design-vue/dist/reset.css';
</script>

<template>
    <HelloWorld/>
</template>

3.在Helloworld.vue里写页面内容，我的主页需要用到组件，所以在这里引入了一个自定义组件名为item.vue

<script>
import item from '../components/item.vue'
export default{
  components:{
    item
  }
}
</script>

<template>
  <div>
    <item text="item1"></item>
    <item text="item2"></item>
  </div>
</template>

4.新建item.vue(子组件用法)

<script>
export default{
    props:['text'],
    methods:{
        Open(){
            alert("打开");
        }
    }
}
</script>
//调用js方法
<template>
	<div class="col item_parent" @click="Open"></div>
</template>

目前效果：