Vue.js 目录结构

上一章节中我们使用了 npm 安装项目，我们在 IDE(Eclipse、Atom等) 中打开该目录，结构如下所示：

目录解析目录/文件说明build项目构建(webpack)相关代码

config配置目录，包括端口号等。我们初学可以使用默认的。

node_modulesnpm 加载的项目依赖模块

src这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：assets: 放置一些图片，如logo等。

components: 目录里面放了一个组件文件，可以不用。

App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。

main.js: 项目的核心文件。

static静态资源目录，如图片、字体等。

test初始测试目录，可删除

.xxxx文件这些是一些配置文件，包括语法配置，git配置等。

index.html首页入口文件，你可以添加一些 meta 信息或统计代码啥的。

package.json项目配置文件。

README.md项目的说明文档，markdown 格式

在前面我们打开 APP.vue 文件，代码如下(解释在注释中)：

// 导入组件

import Hello from './components/Hello'

export default {

name: 'app',

components: {

Hello

}

#app {

font-family: 'Avenir', Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: center;

color: #2c3e50;

margin-top: 60px;

}

接下来我们可以尝试修改下初始化的项目，将 Hello.vue 修改为以下代码：

export default {

name: 'hello',

data () {

return {

msg: 'hello world'

}

重新打开页面 http://localhost:8080/，一般修改后会自动刷新，显示效果。

vue php 架构目录,Vue.js 目录结构相关推荐

nginx反向代理二级目录导致vue项目静态文件css js访问不到
2022年5月30日19:06:00 nginx vue项目配置 server {listen 9888;server_name 127.0.0.1;error_log /data/log/nginx ...
【Django】基于Django架构网站代码的目录结构---转载
经典的Django项目源码目录结构 Django在一个项目的目录结构划分方面缺乏必要的规范.在Django的官方文档中并没有给出大型项目的代码建议目录结构,网上的文章也是根据项目的不同结构也有适当的变 ...
【Django】基于Django架构网站代码的目录结构
经典的Django项目源码目录结构 Django在一个项目的目录结构划分方面缺乏必要的规范.在Django的官方文档中并没有给出大型项目的代码建议目录结构,网上的文章也是根据项目的不同结构也有适当的 ...
MYSQL数据库到VUE前端架构
#MYSQL数据库到VUE前端架构 ##==MYSQL数据库== 1. 安装--配置my.ini,通过DOS初始化mysql,开启mysql服务,加设置账号密码 2. Sql操作分类: ![sql操作 ...
基于Vue的架构设计
文章目录前言技术选型开发规范流程规范 GIT规范前言架构包含非常广泛的概念与内容,架构的核心目的是为了提高效率.降低成本.保障质量, 同时需要结合实际业务情况综合考虑,为未来提供可持续发展 ...
vue族谱架构_从零开始做Vue前端架构（1）
前言想想也已经做过不少架构的项目了,有基于vue,基于react,基于thinkPHP,基于laravel的. 做多了,也就对现有的架构有各种想法,有好的,有坏的,总之,用起来还是不爽.vue-cl ...
vue firebase_如何使用Vue.js，Vuex，Vuetify和Firebase构建SPA：使用Firebase添加身份验证...
vue firebase 第4部分:了解如何使用Firebase添加身份验证和购物车 (Part 4: learn how to use Firebase to add authentication ...
基于蚂蚁金服「如何管理好10万行代码」搭建了 Vue 项目架构
此文是对蚂蚁金服文章的解读,所以要看懂此文一定要先去看原文:如何管理好10万行代码的前端单页面应用. 当时看到蚂蚁金服这篇文章有点茅塞顿开,只不过他们是基于 React 技术栈开发的,但是架构是一种思 ...
从零开始做Vue前端架构（5）
前言弄完了前后端分离,我们自然想打包发布项目了. 不多说,就让我们来看看吧. 开发直接上代码: const webpack = require('webpack') const path = re ...

vue php 架构目录,Vue.js 目录结构

{{ msg }}

vue php 架构目录,Vue.js 目录结构相关推荐

最新文章

热门文章