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

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

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，我们需要在全局使用的一些东西也可以定义在这里面。