概述
之前我也写过一些关于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里面另一个重要的东西路由
最后
以上就是跳跃飞鸟为你收集整理的系统学习Vue.js(一)-------Vue名词解释的全部内容,希望文章能够帮你解决系统学习Vue.js(一)-------Vue名词解释所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复