21.2、vue-cli文件目录
2024-02-27 18:48:56 1 举报AI智能生成
vue-cli文件目录
作者其他创作
大纲/内容
node_modules
安装的各个模块
public
存放的是最后编译项目时候的页面模版
(一个或者多个)
index.html
在webpack打包编译的时候，页面模板也会跟着进行编译
1. 把HTML压缩
2. 把编译后的CSS和JS插入到页面模板中
注意事项：
1. 单独自己导入一些资源信息，把资源信息放置到当前目录下(public)，基于<%= BASE_URL %>指定相对引入的地址
2. 我们需要在页面中留一个#APP容器，因为最后编译的时候，会把所有的内容插入到这个容器中
3. 对于不需要打包合并在一起的资源，
我们可以单独在模板中自己导入
我们可以单独在模板中自己导入
1）有一些公共资源，这些公共资源我们不想最后根据webpack都打包在一起，我们想单独导入
2）还有一些模块不支持CommonJS/ES6Module模块规范，这样无法在项目中进行导入导出，
此时我们需要单独导入到模板页面中（一般此处导入进来的模块，对应的方法都会暴露到window上）
此时我们需要单独导入到模板页面中（一般此处导入进来的模块，对应的方法都会暴露到window上）
3）因为模板页面中的东西很少，我们完全可以先自己写一个Loadding等待的效果（防止移动端资源加载过慢导致的白屏）
4）包括一些特殊需要先执行的JS或者样式，最好也是单独写在这里（这样不要最后合并打包到一起），例如：REM等比缩放的计算
......
......
src
包含整个项目中所有需要包含的内容和代码
（脚手架生成的webpack配置，只对src目录进行编译处理，其它目录是不处理的）
main.js
项目的入口
（单页面一个入口，多页面多个入口）
导入需要渲染的组件，在 new Vue 的时候，
把组件进行编译，最后放置在模版页面中#APP容器中
把组件进行编译，最后放置在模版页面中#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 的进阶配置
0 条评论
下一页
