vue脚手架public放哪些内容-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

vue脚手架public放哪些内容

这篇文章主要介绍“vue脚手架public放哪些内容”,在日常操作中,相信很多人在vue脚手架public放哪些内容问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue脚手架public放哪些内容”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

创新互联-专业网站定制、快速模板网站建设、高性价比永修网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式永修网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖永修地区。费用合理售后完善,10年实体公司更值得信赖。

public文件夹中一般放置一些静态资源(图片),在webpack进行打包的时候,会原封不动的打包到dist文件夹中。public目录下的文件并不会被Webpack处理,它们会直接被复制到最终的打包目录(默认是dist/static)下;必须使用绝对路径引用这些文件,这个取决于你“vue.config.js”中publicPath的配置,默认的是“/”。

一、安装Vue脚手架

1、第一步(仅第一次执行):全局安装@vue/cli

npm i @vue/cli -g

2、切换到要创建项目的目录,然后创建项目

vue create XXX

3、启动项目

npm run serve

备注:

1、npm淘宝镜像地址

npm config set registry https://registry.npm.taobao.org

2、Vue脚手架隐藏了所有webpack相关配置,若要查看执行

vue inspect > output.js

二、vue-cli脚手架初始化项目各个文件夹用途

node_modules文件夹:项目依赖文件夹

public文件夹:

一般放置一些静态资源(图片)。值得注意,放在public文件夹中的静态资源,webpack进行打包的时候,会原封不动的打包到dist文件夹中。

任何放置在 public 文件夹的静态资源都会被简单的复制,而不经过 webpack。你需要通过绝对路径来引用它们。

注意我们推荐将资源作为你的模块依赖图的一部分导入,这样它们会通过 webpack 的处理并获得如下好处:

  • 脚本和样式表会被压缩且打包在一起,从而避免额外的网络请求。

  • 文件丢失会直接在编译时报错,而不是到了用户端才产生 404 错误。

  • 最终生成的文件名包含了内容哈希,因此你不必担心浏览器会缓存它们的老版本。

public 目录提供的是一个应急手段,当你通过绝对路径引用它时,留意应用将会部署到哪里。如果你的应用没有部署在域名的根部,那么你需要为你的 URL 配置 publicPath 前缀:

  • 在 public/index.html 或其它通过 html-webpack-plugin 用作模板的 HTML 文件中,你需要通过
    <%= BASE_URL %> 设置链接前缀:

favicon.ico">

  • 在模板中,你首先需要向你的组件传入基础 URL:

data () {
  return {
    publicPath: process.env.BASE_URL
  }
}

然后:

何时使用 public 文件夹

  • 你需要在构建输出中指定一个文件的名字。

  • 你有上千个图片,需要动态引用它们的路径。

  • 有些库可能和 webpack 不兼容,这时你除了将其用一个独立的

vue-cli3.0有两个放置静态资源的目录分别是public和assets。

public放不会变动的文件(相当于vue-cli2.x中的static)
public/ 目录下的文件并不会被Webpack处理:它们会直接被复制到最终的打包目录(默认是dist/static)下。必须使用绝对路径引用这些文件,这个取决于你vue.config.js中publicPath的配置,默认的是/。

assets放可能会变动的文件
assets目录中的文件会被webpack处理解析为模块依赖,只支持相对路径形式。

简单来说就是就是public放别人家js文件(也就是不会变动),assets放自己写的js文件(需要改动的文件)

src文件夹

assets文件夹:一般用于存放静态资源(放置多个组件共用的静态资源),值得注意,放在在assets文件夹里的静态资源,在webpack打包的时候,webpack会把静态资源当做一个模块,打包到JS文件里面。

components文件夹:一般放置非路由组件(全局组件)

App.vue:唯一的根组件(汇总所有组件)

main.js:入口文件,也是整个程序当中最先执行的文件

.gitignore:git版本管制忽略的配置(一般不碰)

babel.config.js:babel的配置文件(相当于翻译官,比如把ES6相关语法翻译为ES5,兼容性更好,一般不碰)

package.json:应用包配置文件(类似于项目身份证,记录着项目名称、项目依赖、项目运行等信息)

package-lock.json:包版本控制文件(缓存性文件)

README.md:应用描述文件(说明性文件)

vue.config.js:可以对脚手架进行个性化定制,如何配置可以参考Vue CLI

其他文件夹:

  • pages文件夹:存放路由相关组件(pages也可换成views)

  • router文件夹:路由配置文件

  • store文件夹:vuex相关文件

  • mock文件夹:存放mock模拟数据

三、脚手架工作环境

vue-cli脚手架环境:基于node + webpack来支撑我们写vue项目

默认入口文件main.js:所有代码都要和main.js产生直接或间接的引入关系

打包过程:执行打包的时候,webpack会根据入口的引入关系来构建代码地图,把相关的代码用加载器/插件翻译处理,输出到.js文件中,插入到index.html中运行

① main.js → 打包运行入口

② Vue.component("组件名",组件对象) → 给Vue注册一个全局组件

执行顺序:通过main.js文件先注册全局组件,然后是组件内使用这个全局组件。

到此,关于“vue脚手架public放哪些内容”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


标题名称:vue脚手架public放哪些内容
文章出自:http://kswsj.cn/article/gppggo.html

其他资讯