搭建vue脚手架项目中生成文件的含义,基于webpack创建项目生成文件的含义???

注意:这里小博主要叙述的是搭建项目生成的文件,项目中生成的文件代表什么的含义???然后简单的示范一下如何搭建项目基于vue搭建的项目和基于webpack搭建的项目

1.基于vue创建的脚手架项目,输入指令vue create 项目名称(列如vue-app),具体如何搭建脚手架点击vue脚手架查看
2.基于webpack搭建的脚手架项目,输入指令vue init webpack 项目名称 (列如my-app),具体如何webpack搭建脚手架点击webpack脚手架查看

在这里插入图片描述

基于vue搭建项目中生成的相关文件的含义叙述

基于vue搭建的脚手架

简述基于vue搭建项目文件的含义
  • i.node_modules
    • 此文件用来保存我们开发项目时所下载的依赖包,将项目打包时我们不会压缩此文件
  • ii.public
    • public代表公共的意思,一般我们都用来存放静态资源,如图片
  • iii.src
    • src我们整个项目的核心文件夹,这个文件是我们用来编写文件的,此文件夹下含有assets、components、App.vue、mian.js
    • assets
      • 此文件夹用来存放我们的样式文件,图片文件资源
    • components
      • 此文件存放我们开发项目创建的组件文件,生成项目中本人含有一个helloworld.vue组件
    • App.vue
      • 我们所创建编写的组件都会import方式引入到此组件中,因为我们运行服务时,服务默认启动App.vue,并将vue文件编译解析成浏览器可识别的文件,然后给出一个访问地址localhost:8080使我们我们在浏览器中可以看到文件,但我们启动服务时,我们对代码进行修改会自动渲染到页面,因为vue是一个渐进式的框架具体详情请查看官网链接
    • mian.js
      • 整个项目的入口脚本文件
  • iv.babel.config.js
    • bable转码器用来转义成浏览器能识别的代码
  • v.package.json
    • 此文件用来存放项目的配置服务的启动以及可以查看我们使用的是哪个vue版本开发的项目
  • vi.package-lock.json
    • 此文件用来查看我们整个项目安装使用依赖包的版本以及相关信息都能查看到。
  • vii.README.md
    • 项目开发中我们对编写代码一些相关注释存放于此

基于webpack搭建项目中生成的相关文件的含义叙述

在这里插入图片描述

简述基于webpack项目文件的含义,这里小博简述我们需要用到的地方
  • i.build
    • 存放webpack包文件的相关信息
  • ii.config
    • 存放webpack的配置信息
  • iii.node_modules
    • 此文件用来保存我们开发项目时所下载的依赖包,将项目打包时我们不会压缩此文件
  • iv.public
    • public代表公共的意思,一般我们都用来存放静态资源,如图片
  • v.static
    • 存放静态文件
  • vi.src
    • src我们整个项目的核心文件夹,这个文件是我们用来编写文件的,此文件夹下含有assets、components、router、App.vue、mian.js
    • assets
      • 此文件夹用来存放我们的样式文件,图片文件资源
    • components
      • 此文件存放我们开发项目创建的组件文件,生成项目中本人含有一个helloworld.vue组件
    • router
      • 路由文件,配置路由指向
    • App.vue
      • 我们所创建编写的组件都会import方式引入到此组件中,因为我们运行服务时,服务默认启动App.vue,并将vue文件编译解析成浏览器可识别的文件,然后给出一个访问地址localhost:8080使我们我们在浏览器中可以看到文件,但我们启动服务时,我们对代码进行修改会自动渲染到页面,因为vue是一个渐进式的框架具体详情请查看官网链接
    • mian.js
      • 整个项目的入口脚本文件
  • vii.babelrc
    • bable转码器用来转义成浏览器能识别的代码
  • viii.package.json
    • 查看此文件可以详细看到我们启动项目的配置以及可以查看我们使用那些依赖包的是哪个版本开发的项目,vue版本等,
  • viv.package-lock.json
    • 此文件用来查看我们整个项目安装使用依赖包的版本以及相关信息都能查看到。
  • vv.README.md
    • 项目开发中我们对编写代码一些相关注释存放于此
发布了15 篇原创文章 · 获赞 1 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/NanQiao1716/article/details/104572483