我是靠谱客的博主 跳跃飞鸟,最近开发中收集的这篇文章主要介绍系统学习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里面另一个重要的东西路由

 

最后

以上就是跳跃飞鸟为你收集整理的系统学习Vue.js(一)-------Vue名词解释的全部内容,希望文章能够帮你解决系统学习Vue.js(一)-------Vue名词解释所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(62)

评论列表共有 0 条评论

立即
投稿
返回
顶部