系统学习Vue.js(一）-------Vue名词解释

之前我也写过一些关于Vue的文章，当时迫于项目要求，指哪学哪。新的一年，在不是特别忙的情况下，我决定系统的学习一下Vue。现将学习过程记录如下，争取能做到每日一更。

我的学习方法是先整体后部分，先画大纲在完善细节，今天主要是就Vue项目而言做一个整体的认识

快速上手Vue的方法很简单，首先找准Vue项目中的入口文件，也就是main.js;其次是要认识到Vue是单文件应用，*.Vue单页式组件中的内容：

<template>------视图模板

</template>

<style scoped>----组件样式表

样式仅用于当前组件，限定作用域

</style>

<script>----------样式定义

</script>

这是从小了说，，了解这个是为了更好的编译代码，其次再来说说生成Vue项目中生成的文件的意思，项目开发中不认识修改起来还是有点恼火，也不方便在学习的时候阅读别人的源码

Vue项目代码结构（基于webpack-simple模板构建的）

 

• README.md # 项目描述
• index.html # 默认启动页面
• package.json #npm包配置文件
• src
  • App.vue #启动组件
  • assets # 静态资源
    • logo.png
  • main.js #Vue实例入口

这是一般新建项目就能看见的项目目录结构，首先必须得认识这些文件，才能进入下一步的认识

• build-----存放用于编译用的webpack配置与相关的辅助工具代码

  • webpack.base.conf.js------公用的基本webpack配置

  • webpack.dev.conf.js--------开发环境专用的webpack配置项

  • webpack.prod.conf.js------生产环境专用的webpack配置

• config-----存放三大环境（开发、测试、生产）配置文件，用于设定环境变量和必要的路径信息
• test----存放E2E测试与单元测试文件以及相关的配置文件
• static-----存放项目所需要的其他静态资源文件
• dist:-------存放运行npm run build指令后的生产环境输出文件，可直接部署到服务器对应的静态资源文件夹内，该文件夹只有运行在build之后才会生成

以上目录是在Webpack模板下生成的目录，认识这些至少在拿到一个Vue项目的时候不会蒙蔽了，明天将说说Vue里面另一个重要的东西路由