

首页  思维导图  详情



21.2、vue-cli文件目录

2024-02-27 18:48:56   1  举报





AI智能生成

vue-cli文件目录

金色小芝麻

前端

vue

模版推荐

作者其他创作

大纲/内容

node_modules

安装的各个模块

public

存放的是最后编译项目时候的页面模版

(一个或者多个)

index.html

在webpack打包编译的时候，页面模板也会跟着进行编译

1. 把HTML压缩

2. 把编译后的CSS和JS插入到页面模板中

注意事项：

1. 单独自己导入一些资源信息，把资源信息放置到当前目录下(public)，基于<%= BASE_URL %>指定相对引入的地址

2. 我们需要在页面中留一个#APP容器，因为最后编译的时候，会把所有的内容插入到这个容器中

3. 对于不需要打包合并在一起的资源，    我们可以单独在模板中自己导入

1）有一些公共资源，这些公共资源我们不想最后根据webpack都打包在一起，我们想单独导入

2）还有一些模块不支持CommonJS/ES6Module模块规范，这样无法在项目中进行导入导出， 此时我们需要单独导入到模板页面中（一般此处导入进来的模块，对应的方法都会暴露到window上）

3）因为模板页面中的东西很少，我们完全可以先自己写一个Loadding等待的效果（防止移动端资源加载过慢导致的白屏）

4）包括一些特殊需要先执行的JS或者样式，最好也是单独写在这里（这样不要最后合并打包到一起），例如：REM等比缩放的计算

......

src

包含整个项目中所有需要包含的内容和代码

（脚手架生成的webpack配置，只对src目录进行编译处理，其它目录是不处理的）

main.js

项目的入口

（单页面一个入口，多页面多个入口）

导入需要渲染的组件，在 new Vue 的时候， 把组件进行编译，最后放置在模版页面中#APP容器中

App.vue

在工程化的项目中，创建组件只需要构建Xxx.vue即可

（文件中包含当前组件自己的结构模板、JS数据状态方法、自己的样式等）

当前index.html这个页面的主要入口

components

存放多个组件中需要用到的公共组件的

xxx.vue

pages

每一个单独的业务板块或者页面都在这里创建

自己创建的文件夹

assets

存放项目需要的静态资源文件

images

css

lib

...

api

存放axios的二次配置或者一些接口的数据管理

store

管理vuex中的一套信息

router

管理路中的一套信息

views

主组件入口

......

babel.config.js

babel的配置信息（编译解析JS的）

package.json

当前项目的模块依赖清单（脚手架生成的项目中，我们还会把一些webpack需要用到的配置信息，也写在这里）

"scripts"

配置可执行的脚本命令

$ npm run serve / $ yarn serve

开发环境下预览项目

（webpack会打包编译，并且基于dev-server创建一个本地预览服务，并且监听代码变化，一旦有变化会重新编译，自动刷新浏览器看到效果）

$ npm run build

生产环境部署之前，基于这个命令，把项目进行打包

（打包后的内容放到dist或者build目录中，我们把这个目录中的内容整体部署到服务即可）

"dependencies" : {...}

生产依赖

"devDependencies" : {...}

开发依赖

"eslintConfig" : {...}

词法解析规则

可以在从此处自定义ESLINT词法检测规则

"browserslist" : {...}

配置浏览器兼容的列表

vue.config.js

vue-cli 的进阶配置

 Collect

Get Started

目录结构 4

 Collect

Get Started

21.1、vue-cli创建项目

 Collect

Get Started

vue前端架构图

 Collect

Get Started

Vue-CLI 项目启动原理





0 条评论

下一页