vue 项目目录解析

vue全家桶:https://www.bilibili.com/video/av70949811/

这个视频还行  讲的很细

 

 

webpack的构建项目分析,项目目录分析

src(资源目录文件)都是放css,js,images文件的
因为会用到webpack,所有已会有webpack.config.js
这是后缀名为js的但是我们并没有放到js资源中
还有很多的配置文件

首先是我们用webpack创建的vue项目目录
.git文件是我们的代码管理
dist文件有dundle.js这个文件是webpack进行打包输出的文件,还有index.html忘了不知道是干嘛的

src资源管理文件:我们的组件,所有的资源放在这里入口文件main.js,入口App.vue文件,index.html
router.js。还有我们的js,images。这个lib是我们放第三方包的,又不是用npm下载的

然后呢!同级目录下都是配置文件:.babelrc .gitignore LICENSE(这个我倒是忘了是干嘛的了)
package.json webpack.config.js 还要一个readme文件 有三个文件是我们上传到github上一般要写的东西吧

 

用脚手架创建的项目目录也是差不多啦

也会有点不一样,vue create

但是都是一样。我现在要做的是理清关系

我才知道,为什么有创建这么多东西。都是知道是为了方便管理

 

那回到最开始,前端的主要任务是什么
写页面,静态页面(HTML,css,js)
index.html(这是主界面)然后js,css,images
我们都放在src中,然后引入进来。随着我们的项目
越来越大,我们需要的插件,框架越来越多,
我们需要引入的就越来越多,有很多的后缀名
有很多的依赖,我们该如何管理

项目的第一步:index.html文件
我们不想把所有的静态资源全部引入到index.html中
也为了减少二次请求,然后webpack就诞生了,他将所有的
静态资源打包成一个文件js文件。经过webpack打包的
文件boudle.js之后,引入这个文件到index.js就可以了
这样的文件,浏览器可以认识并渲染它

项目的第二步:建一个入口文件,main.js 经过webpack打包 bundle.js

 

然后接下来我们用我们主要的开发框架vue
组件,模块化开发
我们会把所有文件都引入到main.js这个文件中
那么相当于我们,一共就是只有两个文件
index.html main.js这两个文件

 

OK,项目目录,项目搞清楚了

开始一点点的写项目了

 

前后端分离,就真的是后端那边接口,然后丢给我们

现在的vue是以数据驱动为核心,不再操作dom

和以前的jquery不同了

现在的vue-cli是3版本了和2版本还是有很多差别吧

 

前后端必备技术,Mock技术。怎么说呢,就是我们课可以不用等待

后端传过来接口数据,我们可以先用Mock技术模拟数据。然后呢

当后端有接口数据给我们的时候,我们用Mock技术将其融合就可以了

 

 

 

vue全家桶和webpack有关系吗?没有什么关系

vue只是基础的语法   为更好快捷的做项目,满足更好多的需求的时候

全家桶这几技能就诞生了  都是基于vue 但不是同一个作者写的

 

 

 

 

 

 

借用建筑工程学上的概念,搭建架子

方便我们去构建项目

 

 

 

就是说vue-cli可以一键生成,为我们配置好了

webpack,因为我们要进行打包,所以还会用到

webpack。每次做项目都搭建webpack配置的话

很麻烦,所以vue-cli出现了命令行界面

 

所以为什么我vue create的时候会很久

因为它会自己下载很多的资源包

然后会自己配置好,

vue.js官方脚手架就是使用了webpack模板

层层联系:vue-cli ==》webpack ==》依赖node.js

 

 

 

 

 

 

 

 

 

这些webpack,vue-router,axios,vu-cli都是工具

那我们使用之前,要先安装这些工具,然后才可以使用

npm install -g @vue/cli  这是脚手架vue-cli3.x的安装

现在很少有人再搭建脚手架2了,因为在3的基础上是可以安装

做一个脚手架2的模板的

 

 这个-g可以加在前面,也可以加在后面。并没有什么影响

这些参数的东西

 

所以我上次用的init这个2.x版本的

 

 

这个yarn也会一个包管理工具

因为当时的npm不好用,然后呢那些大厂就推出了这个yarn 

 

脚手架vue-cli3.x创建项目直接  vue create 项目名

 

当我拉取脚手架2之后,我想创建2,就用2的命令  vue init webpack my-project

这样的话,他就会在这个项目中配置好webpack

脚手架2创建项目还有很多选项要选择的

想创建3就用3命令就好了

 

posted @ 2019-10-14 10:16  AJking  阅读(1198)  评论(0编辑  收藏