美文网首页ins-vuevue
Vue项目构建与管理--脚手架工程目录篇

Vue项目构建与管理--脚手架工程目录篇

作者: youins | 来源:发表于2018-07-03 12:34 被阅读4次

    通过脚手架构建出来的目录结构比较简单,基本的目录结构比较清晰.

    image
    • build -- 项目构建的相关代码
    • config -- 配置目录,包括端口、环境等的配置
    • src -- 开发的主要目录
      • asset : 放置一些图片
      • components :主要放置一些常用的组件文件
      • App.vue:项目的入口文件(顶层父组件)
      • main.js:项目的核心文件(vue的实例初始化)
      • router: 项目页面路由视图
    • README.md:markdown的说明文档
    • package.json:npm的配置文件

    build

    • build.js

    build文件夹里有一个 build.js ,是我们完成项目之后需要运行的, 可以将我们的项目文件打包成 静态文件,存放在项目根目录的 dist 文件夹中(现在目录里还没有这个文件夹,build的时候会自动生成),当然你可以自己设置路径,是在。。应该是在 config 文件夹中的 index.js 中改,可以指定主页,默认是 index.html。

    • check-versions.js

    主要是检查一些所依赖的工具的版本是否适用,如nodejs、npm,若版本太低则会提示出来。

    • dev-client.js

    应该是本地客户端开发中有关热更新的吧

    • dev-server.js

    是一个用作服务器端的东西,涵盖了express和它的一些模块,为了在本地服务器上把我们的项目跑起来的一个文件,引入了反向代理的模块,我们可以用来发起跨域请求。

    • utils.js

    里面引入了一些css-loader,以便于解析各种格式的css,如 less,sass

    • vue-loader.conf.js

    它把上面的 utils.js 引入了,应该是用于切换 开发模式和 生产模式的文件,以便于用不同模式来解析css

    • webpack.base.conf.js

    webpack主要配置选项

    • webpack.dev.conf.js

    开发环境下webpack主要配置选项

    • webpack.prod.conf.js

    生产环境下webpack主要配置选项

    src

    • App.vue

    是我们的主组件,也是我们所有组件和路由的出口,之后他会被渲染到我们项目根目录的 index.html 中显示出来,我们可以在这里写一些适合全局的css样式,比如说 css reset,字号,字体什么的。

    • assets

    是我们放一些静态图片资源的目录,虽然我没有放图片在里面。

    • components

    这里存放的是我们写的各种组件,各个组件联系在一起组成一个完整的项目

    • router

    我们定义路由的地方,虽然也可以直接在 main.js 中直接定义,但是分开的话结构更加清晰,路由的定义我们下次再说~

    • main.js

    入口文件,引入了 vue模块 和 app.vue 组件 以及 路由router,我们需要在全局使用的一些东西也可以定义在这里面。

    滇黔桂燃气项目案例

    至此整个vue-cli的目录我们都过了一遍,然后介绍一下滇黔桂燃气项目的项目目录结构,主要区别在于SRC目录

    image

    src

    • api

    主要存放Axios网络库与后端应用接口对接的函数实现

    • data

    主要存放一些全局配置的数据以及测试数据

    • lib

    主要存放通用JS函数,向各个组件提供业务支持

    • mock

    在前后端分离模式下,前端接口的测试可以利用mock实现,不必再等待后端接口的实现

    • pages

    主要存放各个业务视图,每个业务试图是由components目录下的组件组合而成

    相关文章

      网友评论

        本文标题:Vue项目构建与管理--脚手架工程目录篇

        本文链接:https://www.haomeiwen.com/subject/vqvduftx.html