深入理解Vue-cli搭建项目后的目录结构探秘
我最近也在研究Vue-cli的路上,今天了解一下Vue-cli目录结构,那么今天也算个学习笔记吧!
一、前言
这里先说一下使用vue-cli之前的事情。
由于刚刚接触Vue不久,就接到了一个移动端项目,于是打算使用vue来进行一次尝试,所以按照练习时候的样子,emmm先把vue.js引入网页里来,emmm自己的外联main.css样式引进来,还有自己的main.js文件,还有一些图片布拉布拉的,所以我整个项目的结构如下:(捂脸)
├──css ├──images ├──index.html └──js
由于之前我连路由,组件什么的都不会用,所以项目效果可想而知,连点击文章标题显示文章都是用弹窗来实现的(捂脸),一按返回就退出了整个网页有木有,体验效果极其糟糕,于是自己强行加了几个“返回”按钮,(实际就是v-show的切换emmmm),各种栏目的切换也是通过这个,然后。。。产品就要求我改了,啊啊没办法,只好重写咯,这时学长推荐了使用vue-cli来快速开发,于是就开始了vue-cli的尝试之旅
二、Vue-cli使用旅程
之前看Vue官方文档的安装的时候,在命令行工具那里看见了vue-cli的安装,也尝试过,不过也就是初始化了一个项目,然后看见哇竟然自动在本地localhost:8080跑起来了,觉得很神奇,然后。。就没管它了,感觉自己像个智障,然后之前初始化的也找不到了,然后就重新初始化了一个项目,命令如下
#全局安装vue-cli $npminstall--globalvue-cli #创建一个基于webpack模板的新项目 $vueinitwebpackmy-project #安装依赖,走你 $cdmy-project $npminstall $npmrundev
没错,我就是直接从官网复制粘贴过来的,不过把my-project改成了campusnews,emmm..在VSCode上把文件夹打开一看,我屮艸芔茻,这些都是什么玩意,这么一大堆东西,鬼都看不懂哦,不说了,放上来体会一下:
.......算了,本来打算用tree生成一下所有的结构树,还是就展示一下主目录吧~
├──build ├──config ├──index.html ├──node_modules ├──package.json ├──package-lock.json ├──README.md ├──src └──static
看不懂哦,只好去找找资料了,以下是我经过查找资料和自己的理解来讲述的,如有错误希望指正~
1.build
这里主要是放webpack的一些配置,webpack是前端网站的一种打包工具,具体的可以去这个链接看看哦,是别人翻译好的。
webpack中文指南
目录结构:
├──build.js ├──check-versions.js ├──dev-client.js ├──dev-server.js ├──utils.js ├──vue-loader.conf.js ├──webpack.base.conf.js ├──webpack.dev.conf.js └──webpack.prod.conf.js
(1)build.js
build文件夹里有一个build.js,是我们完成项目之后需要运行的,可以将我们的项目文件打包成静态文件,存放在项目根目录的dist文件夹中(现在目录里还没有这个文件夹,build的时候会自动生成),当然你可以自己设置路径,是在。。应该是在config文件夹中的index.js中改,可以指定主页,默认是index.html。
(2)check-versions.js
主要是检查一些所依赖的工具的版本是否适用,如nodejs、npm,若版本太低则会提示出来。
(3)dev-client.js
应该是本地客户端开发中有关热更新的吧~
(4)dev-server.js
是一个用作服务器端的东西,涵盖了express和它的一些模块,为了在本地服务器上把我们的项目跑起来的一个文件,引入了反向代理的模块,我们可以用来发起跨域请求。
(5)utils.js
(是一个功能模块?)里面引入了一些css-loader,以便于解析各种格式的css,如less,sass什么的。
(6)vue-loader.conf.js
它把上面的utils.js引入了,应该是用于切换开发模式和生产模式的文件吧,以便于用不同模式来解析css。
下面那三个我只知道是webpack的一些打包的设置,比如指定入口文件啊,依赖安装路径啊,对不同后缀的文件用不同的loader去解析呀什么的。目前不了解这个也对我们开发项目影响不大~
2.config
不知道干啥的,应该是配置文件
3.node_modules
依赖所存在的文件,就是我们一开始使用npminstall安装的东西,都在里面,以后我们要添加依赖也是放在这个里面,可能有人会又疑问,你npminstall后面啥也没加啊,你安装了啥。一看就是不了解npm的人(虽然我也不了解(捂脸)),npminstall可以从当前根目录中的package.json文件中读取所要安装的模块的名称和版本,然后一次性安装所有的依赖。
4.src
终于到了最重要的部分,src目录就是一般我们需要写的地方了,先放一下目录结构:
├──App.vue ├──assets ├──components ├──main.js └──router
(1)App.vue是我们的主组件,也是我们所有组件和路由的出口,之后他会被渲染到我们项目根目录的index.html中显示出来,我们可以在这里写一些适合全局的css样式,比如说cssreset,字号,字体什么的。
(2)assets
是我们放一些静态图片资源的目录,虽然我没有放图片在里面。
(3)components
这里存放的是我们写的各种组件,各个组件联系在一起组成一个完整的项目
(4)router
我们定义路由的地方,虽然也可以直接在main.js中直接定义,但是分开的话结构更加清晰,路由的定义我们下次再说~
(5)main.js
入口文件,引入了vue模块和app.vue组件以及路由router,我们需要在全局使用的一些东西也可以定义在这里面。
5.static
用于存放我们需要使用的一些外部的js、css文件,需要使用的时候从这里引到文件内。
├──package-lock.json ├──README.md
第一个我不知道是干啥的,第二个就是写说明文档的咯。
好了,至此整个vue-cli的目录我们都过了一遍,虽然我写的不是很详细,甚至有错误,待我慢慢学习并更新咯,希望各位看官老爷能指出,谢谢。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。