Vue 单文件组件的基础入门指南

        本文是我2年前做的一个学习小demo，在这里分享一下

        希望对想要学习Vue的小伙伴能有一丢丢的小帮助~_~

1 Vue CLI

     Vue CLI (opens new window)是一个基于Vue.js进行快速开发的完整系统。

• 这里我使用 Vue CLI 生成了一个Vue项目，命令为：vue create 自定义项目名称
• 生成的Vue项目目录结构如下【目录生成命令：tree > /f E:result.txt】

│  .gitignore  这个文件的作用就是告诉Git哪些文件不需要添加到版本管理中
│  babel.config.js 项目范围配置
│  jsconfig.json 目录中存在jsconfig.json文件表示该目录是JavaScript项目的根目录
│  package.json  定义了项目的所有依赖，包括开发时依赖和发布时依赖
│  README.md     说明文件
│  vue.config.js vue的一个配置文件
│  yarn.lock     作用是锁定唯一版本
├─node_modules  这个目录存放的是项目的所有依赖，即 npm install 命令下载下来的文件  
├─public
│      favicon.ico  ico图标文件
│      index.html  项目的首页，入口页，也是整个项目唯一的HTML页面
│      
└─src
    │  App.vue  是一个Vue组件，也是项目的第一个Vue组件
    │  main.js  相当于Java中的main方法，是整个项目的入口js
    │  
    ├─assets  用来存放资源文件
    │      logo.png  图片文件
    │      
    └─components  用来存放组件（一些可复用，非独立的页面）
            HelloWorld.vue 项目自带的HelloWorld组件
            TodoItem.vue   自定义开发的组件示例

2 组件中包含三部分内容

3 源码示例

• TodoItem.vue

这个是开发的一个单文件组件示例代码

• App.vue

这个是开发的一个单文件组件示例代码

• App.vue

这个是开发的一个单文件组件示例代码

4 最终运行效果

5 下载源码

下载源码https://github.com/fenglm2021/fenglm-vue-cli.git