认识vue3.0项目的目录结构

上一篇笔记新建一个vue3.0项目

新建项目后，用vscode打开，会看到项目目录，如下图

来看看我们新建的项目里有哪些内容

node_modules	npm 加载的项目依赖模块
public	用于存放静态资源，不会被压缩、合并
src	主要开发内容都在这个文件夹下，包含以下几项： ① assets：存放图片、logo ② components:：存放组件 ③ router：存放路由（路由用于界面之间跳转） ④ store：仓库（与vuex有关） ⑤ view：初始的界面组件 ⑥ App.vue:：项目入口文件 ⑦ main.js ：项目的核心文件
package.json	项目配置文件（在里面可以看到用了哪些依赖和技术）
README.md	项目说明文档（可以看到运行项目的命令）

开始学习需不求甚解，不可操之过急，慢慢来雪球会越滚越大的。

进一步详细的来看单个文件中的内容：

1.重要的核心文件main.js

两大部分，一导入了组件、路由等，二使用createApp这个 API返回一个应用实例，并且可以通过链条的方式继续调用其他的方法

这也是与vue2.0不同之处，2.0创建一个vue 实例是通过 new Vue()来实现的

2.那把实例挂载到了id为#app的dom上，这个dom写在哪里呢？就在index.html里

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

3.项目的入口文件App.vue

两个路由对应了界面上两个链接

home页面

注：我删除了初始化时多余的代码，结果报错不能出现空行。原因是lint的设置有问题，用--fix修复就好（步骤：package.json中将lint的配置改为 "lint": "eslint --fix --ext .js,.vue src"）

主页面的msg就是只简单赋值，子页面再声明类型，就可以用了

了解了大致结构，简化得到了一个干净的初始项目

快捷传送下一篇：vue3.0的基础语法（一）指令绑定

认识vue3.0项目的目录结构相关推荐

TypeScript及TypeScript在vue3.0项目中的基本使用
一. TypeScript是什么 TypeScript 是一种由微软开发的自由开源的编程语言,主要提供了类型系统和对 ES6的支持.它是JavaScript的一个超集,扩展了JavaScript的语 ...
创建VUE项目，vue-cli2.0版本和3.0版本的区别，将vue2.0项目升级为vue3.0项目
创建VUE项目,vue-cli2.0版本和3.0版本的区别,将vue2.0项目升级为vue3.0项目使用vue-cli2.0版本创建vue项目创建前的准备开始创建创建过程项目正常创建使用v ...
vite 搭建 Vue3.0项目
vite 搭建 Vue3.0项目 vue3.0+TS+AntDesignVue项目 vite 初始化vite项目配置项目配置typescript 配置Vue Router 配置Vuex 配置Ant ...
Android项目的目录结构
引言本篇将通过HelloWorld项目来介绍Android项目的目录结构.本文的主要主题如下: 1.HelloWorld项目的目录结构 1.1.src文件夹 1.2.gen文件夹 1.3.Andro ...
Android开发之旅：HelloWorld项目的目录结构
引言前面Android开发之旅:环境搭建及HelloWorld,我们介绍了如何搭建Android开发环境及简单地建立一个HelloWorld项目,本篇将通过HelloWorld项目来介绍Androi ...
【Vue】Docker + Nginx 部署 Vue3.0 项目
Docker + Nginx 部署 Vue3.0 项目 1.用指令 npm run build 打包vue.js项目(该项目是在WebStorm里面新建的Vue空项目). 打包成功后,会生成一个目录d ...
解决IDEA修改已有项目为maven项目时目录结构被改变的问题
Idea可以在项目根目录上右键选择"添加框架支持",选择maven,为项目添加Maven支持. 但这样会导致原有项目的目录结构被破坏. 更好的方法是在根目录添加pom.xml文件 ...
vue3.0项目创建
vue3.0项目创建可视化创建(手脚架) 命令行创建可视化创建(手脚架) 1.win+R打开cmd命令行 2.输入vue ui 打开手脚架 vue ui 3.打开项目管理器,选择创建 4.选择项目 ...
02. Yii 2.0 框架的目录结构
1. 项目的目录结构基础版: basic 目录下的各个文件夹: commands 控制台 config 配置文件 console.php ...

认识vue3.0项目的目录结构

认识vue3.0项目的目录结构相关推荐

最新文章

热门文章