持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情

上篇给大家介绍了怎么安装创建vue-cli项目，没有看过的可以点击可查看上篇文章从零开始搭建vue-cli项目

vue-cli3项目目录结构

node_modules：依赖包

public:页面入口文件

src:项目核心文件（我们所写的代码都放在这个文件夹下）

.gitignore：git上传需要忽略的文件配置

balel.config.js： 使用一些预设

package-lock.json：版本锁定文件

package.json：包管理文件

README.md：声明文档

vue.config.js：自己加vue-cli3的配置文件

其中src文件夹是需要掌握的，至于其他了解一下就可以

src文件夹

assets:静态资源（样式类文件，如css，less，sass，以及一些外部js文件）

components:公共组件（多个组件同时用的可以放这里）

router：配置项目路由

views：视图

App.vue：根组件入口

main.js：入口文件（程序的主入口）

App.vue根组件

一个vue页面通常由三部分组成:模板(template)、js(script)、样式(style)

其中模板只能包含一个父节点,顶层只能有一个div

</router-view>是子路由视图，后面的路由页面都显示在此处

script： 其下面可以包含数据(data)，生命周期(mounted)，方法(methods)等。

样式通过style标签<style></style>包裹，默认是影响全局的。如需定义作用域只在该组件下起作用，需在标签上加scoped，<style scoped></style>

main.js主入口

main.js主要是引入vue框架，根组件及路由设置，并且定义vue实例，图中的components:{App}就是引入的根组件App.vue

router路由配置

这里定义了路径为‘/’的路由，该路由对应的页面是home组件,当我们在浏览器访问时就渲染的组件。