使用 IDE 打开该目录,结构如下所示
目录结构:
build | 项目构建(webpack)相关代码。 |
webpack | 模块打包器,它可以将模块打包成符合生产环境部署的前端资源。 |
config | 需要进行相关的配置,包括端口号等。一般是默认的。 |
node_modules | 加载的项目依赖模块。 |
src | 项目源码目录(开发都在这里进行)。 |
components | 目录里面放了一个组件文件。 |
App.vue | 项目入口文件,我们也可以直接将组件写这里,而不使用 components 目录。 |
main.js | 项目的核心文件。 |
static | 静态资源目录,如图片、字体等。 |
.xxxx文件 | 属于配置文件,如语法配置,git配置。 |
index.html | 首页入口文件。 |
package.json | 项目配置文件。 |
README.md | 项目的说明文档,markdown 格式 |
api:连接后端接口
router:其实就是指向的意思
.vue文件:自定义的文件类型,用类似HTML的语法描述一个Vue组件。
每个.vue文件包含三种类型的顶级语言块 <template>, <script> 和 <style>。这三个部分分别代表了 html,js,css。
template 部分
一个 vue 组件, template 则代表它的 html 结构,见图知义。注意:我们不是说把代码包裹在 <template></template> 中就可以了,而是必须在里面方置一个 html 标签来包裹所有的代码。如下,使用了 <div></div>标签。
script 部分
引用的文件
我们将所有的代码包裹于如下的代码中间:
style 部分
对我们的 template 里内容出现的 html 元素写一些样式。