首页天道酬勤vue3.0文档,vue文件目录结构

vue3.0文档,vue文件目录结构

张世龙 05-05 19:04 15次浏览

文章目录一,用一个目录树结构展示二,package.json三,项目中还有一个非常重要的文件main.ts文件。 你可以把这个叫做入口文件。 这里只有简单的三行代码。

一、用一个目录树结构展示|-node_modules --所有项目依赖包都放在此目录下|-public --公共文件夹--| favicon.ico index.html --入口的html编写的代码基本上位于此目录下----|assets----放置静态文件的目录,例如logo.pn位于此处---|coossets 这是因为Vue2也采用了TypeScript,所以以ts结尾----|shims-vue.d.ts----类文件(也称为定义文件),以. vue结尾的文件在ts中是不被允许的-.browserslistrc --在不同前端工具之间共享目标浏览器和NNNS的作用是设置兼容性|--.eslintrc.js----eslint的配置文件。 不需要太多说明。 |-.gitignore --用于将那些文件配置为不受git管理|-package.json --命令配置管理文件|-readme.MD--用markdown语法编写|-ts cooode 使用-yarn.lock---yarn后自动生成的文件由yarn管理,安装yarn软件包时的重要信息存储在yarn.lock文件中

在这两节课中,您可以使用npm run serve或yarn serve查看项目的效果,这是因为package.json中的scripts工作正常。 我们先来看看这三个命令。

//----scripts ' : { ' serve ' : ' vue-CLI-service serve ',' build ' 3360 ' vue-CLI-service build '/////------} 这里可以通过devDependencies看到哦。

这三条命令的含义如下。

serve :是一个用于在开发时检查效果的命令,视频将查看效果build :的打包标记。 通常用于在生产环境中使用lint :检查代码中的描述规范。 顺便说一下,package.json将介绍其他两个重要的配置项目

dependencies和devDependencies。

这两个都是用来记录安装包信息的,但要完全了解他们之间的区别,必须首先了解开发环境和生产环境是什么。

开发环境:作为程序员,每天的事情就是在开发环境中编写代码,测试代码,修复错误。 也就是说,这些代码没有在线。

生产环境:代码上线,放在正式服务器上,由公司运营赚钱的代码。

了解这两个概念后,dependencies下的软件包必须在生产环境中使用,当然在开发环境中也需要。 devDependencies是一种代码,仅在开发环境中使用,联机时这些软件包没有用,打包后也不会打包。

三、项目中还有一个非常重要的文件main.ts文件。 你可以把这个叫做入口文件。 这里只有简单的三行代码。 import { createApp } from 'vue '; 导入//vue文件,单击` create app ` importappfrom './app.vue '; //引入自定义组件,页面上看到的基本上都是在此组件上创建app (app ).mount ) ' #app ' ); 将//app装载到#app节点上,并在public目录下的index.html中查找节点

idea建各种工程,idea运行vue项目