Vue cli安装及使用

安装
在cmd窗口输入
npm i -g @vue/cli
1.创建项目
vue create 项目名
2.选择项目模板
.选择 no eslint规范代码
.如果没有no eslint 选择最后一个，将倒数第三个按空格取消，然后按回车即可
3.运行项目
在vscode中打开终端 用 yarn serve 或者 npm run serve 运行
在浏览器输入localhost：8080查看效果
4.项目结构

• node_modules
• public
  • index.html
  • favicon.icon
• src 这个是未来我们会修改代码的地方
  • assets 静态资源存放的位置
  • components 组件存放的位置
  • App.vue 入口组件
  • main.js 入口文件

5. 组件
   vuecli创建的项目中，组件是一个又一个的.vue文件，默认VSCode不支持vue文件，因此安装一个插件vetur
   vue中的组件就是一个.vue文件
   .vue组件

<template>
  <div></div>
</template>

<script>

// export default 就是模块导出 意思就是把这个组件给导出了 未来在其他组件中可以通过import的方式导入
export default {
  data () {
    return {}
  },

  props: {},

  methods: {},

  computed: {},

  filters: {},
  
  created () {},
  
  mounted () {}
}
</script>

<style>
/* 组件中的样式 */
</style>

6.创建组件
在components中新建文件组件名.vue文件，在文件中输入vue快速生成文件结构

<template>
  
</template>

<script>
export default {

}
</script>

<style>

</style>

7.组建的使用

组件在创建时使用了export default进行了导出操作，我们如果想使用组件，则在要使用组件的父组件中导入对应的组件

<template>
  <div id="app">
    <!-- 3 在template中使用组件标签 -->
    <House></House>
  </div>
</template>

<script>
// 1 导入组件 import 自定义组件名（尽量和组件的文件夹名字相同） from '文件路径'
import House from './components/House.vue'

export default {
  name: 'App',
  // 2 注册组件
  components: {
    // House: House
    House
  }
}
</script>

<style>

</style>