VueCLI 基本操作

VueCLI

VueCli文档

安装@vue/cli

npm i -g @vue/cli

# 如果装不上 

cnpm i -g @vue/cli

当我们安装了这个模块后，我们的命令行工具里就会有命令vue

如果npm太慢，则直接修改npm的相关源

npm config set registry https://registry.npm.taobao.org

yarn config set registry https://registry.npm.taobao.org

创建项目

想要创建项目需要使用vue命令

vue create 项目名

如果不喜欢命令环境可以使用vue中的ui界面创建（不推荐）

vue ui

选择项目模板

运行命令后可以选择项目模板
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oRPd3LzB-1626276718353)(./img/Snipaste_2021-06-30_10-55-13.png)]

选择第一个模板no eslint，如果我们对应的界面中没有第一个，则选择最后一个。把倒数第三个选项，按空格取消，然后继续按回车即可

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JAxUeuUC-1626276718355)(./img/Snipaste_2021-06-30_10-58-16.png)]

创建项目完成

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tfMYYygn-1626276718356)(./img/Snipaste_2021-06-30_11-00-05.png)]

运行项目

在项目中打开终端，运行命令

npm run serve
# 或者
yarn serve

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uUR9JlBh-1626276718359)(./img/Snipaste_2021-06-30_11-02-42.png)]

项目结构

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

组件

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

vue中的组件就是一个.vue文件

以前的组件

const Component = {
  template: `
    <div></div>
  `,
  data () {
    return {}
  },

  props: {},

  methods: {},

  computed: {},

  filters: {},
  
  created () {},
  
  mounted () {}
}

现在的组件 .vue组件

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

<script>

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

  props: {},

  methods: {},

  computed: {},

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

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

创建组件

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

<template>
  
</template>

<script>
export default {
  
}
</script>

<style>

</style>

组件的使用

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

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

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

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

<style>

</style>