从零开始Vue项目实战-项目结构
Posted dreamingbaobei
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了从零开始Vue项目实战-项目结构相关的知识,希望对你有一定的参考价值。
现在在浏览器中输入http://localhost:8083,可以看到初始的“Welcome to Your Vue.js App”页面了
目录结构 ├── README.md 项目介绍 ├── index.html 入口页面 ├── build 构建脚本目录 │ ├── build-server.js 运行本地构建服务器,可以访问构建后的页面 │ ├── build.js 生产环境构建脚本 │ ├── dev-client.js 开发服务器热重载脚本,主要用来实现开发阶段的页面自动刷新 │ ├── dev-server.js 运行本地开发服务器 │ ├── utils.js 构建相关工具方法 │ ├── webpack.base.conf.js wabpack基础配置 │ ├── webpack.dev.conf.js wabpack开发环境配置 │ └── webpack.prod.conf.js wabpack生产环境配置 ├── config 项目配置 │ ├── dev.env.js 开发环境变量 │ ├── index.js 项目配置文件 │ ├── prod.env.js 生产环境变量 │ └── test.env.js 测试环境变量 ├── mock mock数据目录 │ └── hello.js ├── package.json npm包配置文件,里面定义了项目的npm脚本,依赖包等信息 ├── src 源码目录 │ ├── main.js 入口js文件 │ ├── app.vue 根组件 │ ├── components 公共组件目录 │ │ └── title.vue │ ├── assets 资源目录,这里的资源会被wabpack构建 │ │ └── images │ │ └── logo.png │ ├── routes 前端路由 │ │ └── index.js │ ├── store 应用级数据(state) │ │ └── index.js │ └── views 页面目录 │ ├── homePage.vue │ └── notfound.vue ├── static 纯静态资源,不会被wabpack构建。 └── test 测试文件目录(unit&e2e) └── unit 单元测试 ├── index.js 入口脚本 ├── karma.conf.js karma配置文件 └── specs 单测case目录 └── Hello.spec.js
在views文件夹下暂时新建三个文件 homePage.vue和notFound.vue,作为首页和404页面
为了快速搭建项目,学习重点知识,这里引入mint-UI作为UI框架
npm i mint-ui -S
在 main.js 中写入以下内容:
import Vue from ‘vue‘ import MintUI from ‘mint-ui‘ import ‘mint-ui/lib/style.css‘ import App from ‘./App.vue‘ Vue.use(MintUI)
在components里新增3个组件,header-bar,
以上是关于从零开始Vue项目实战-项目结构的主要内容,如果未能解决你的问题,请参考以下文章
Vue3.x 从零开始—— Router + Vuex + TypeScript 实战演练(上)
从零开始:一个正式的vue+webpack项目的目录结构是怎么形成的
Python 小白从零开始 PyQt5 项目实战折叠侧边栏的实现