Linter Configuration

This boilerplate uses ESLint as the linter, and uses the Standard preset with some small customizations.

If you are not happy with the default linting rules, you have several options:

  1. Overwrite individual rules in .eslintrc.js. For example, you can add the following rule to enforce semicolons instead of omitting them:

    // .eslintrc.js
    "semi": [, "always"]
  2. Pick a different ESLint preset when generating the project, for example eslint-config-airbnb.

  3. Pick "none" for ESLint preset when generating the project and define your own rules. See ESLint documentation for more details.

    Pre-Processors

    This boilerplate has pre-configured CSS extraction for most popular CSS pre-processors including LESS, SASS, Stylus, and PostCSS. To use a pre-processor, all you need to do is installing the appropriate webpack loader for it. For example, to use SASS:

    npm install sass-loader node-sass --save-dev

    Note you also need to install node-sass because sass-loader depends on it as a peer dependency.

    Using Pre-Processors inside Components

    Once installed, you can use the pre-processors inside your *.vue components using the lang attribute on <style> tags:

    <style lang="scss">
    /* write SASS! */
    </style>

    A note on SASS syntax

    • lang="scss" corresponds to the CSS-superset syntax (with curly braces and semicolons).
    • lang="sass" corresponds to the indentation-based syntax.

    PostCSS

    Styles in *.vue files are piped through PostCSS by default, so you don't need to use a specific loader for it. You can simply add PostCSS plugins you want to use in build/webpack.base.conf.js under the vue block:

    // build/webpack.base.conf.js
    module.exports = {
    // ...
    vue: {
    postcss: [/* your plugins */]
    }
    }

    See vue-loader's related documentation for more details.

    Standalone CSS Files

    To ensure consistent extraction and processing, it is recommended to import global, standalone style files from your root App.vue component, for example:

    <!-- App.vue -->
    <style src="./styles/global.less" lang="less"></style>

    Note you should probably only do this for the styles written by yourself for your application. For existing libraries e.g. Bootstrap or Semantic UI, you can place them inside /static and reference them directly in index.html. This avoids extra build time and also is better for browser caching. (See Static Asset Handling)

    Handling Static Assets

    You will notice in the project structure we have two directories for static assets: src/assets and static/. What is the difference between them?

    Webpacked Assets

    To answer this question, we first need to understand how Webpack deals with static assets. In *.vuecomponents, all your templates and CSS are parsed by vue-html-loader and css-loader to look for asset URLs. For example, in <img src="./logo.png"> and background: url(./logo.png)"./logo.png" is a relative asset path and will be resolved by Webpack as a module dependency.

    Because logo.png is not JavaScript, when treated as a module dependency, we need to use url-loader and file-loader to process it. This boilerplate has already configured these loaders for you, so you basically get features such as filename fingerprinting and conditional base64 inlining for free, while being able to use relative/module paths without worrying about deployment.

    Since these assets may be inlined/copied/renamed during build, they are essentially part of your source code. This is why it is recommended to place Webpack-processed static assets inside /src, along side other source files. In fact, you don't even have to put them all in /src/assets: you can organize them based on the module/component using them. For example, you can put each component in its own directory, with its static assets right next to it.

    Asset Resolving Rules

    • Relative URLs, e.g. ./assets/logo.png will be interpreted as a module dependency. They will be replaced with an auto-generated URL based on your Webpack output configuration.

    • Non-prefixed URLs, e.g. assets/logo.png will be treated the same as the relative URLs and translated into ./assets/logo.png.

    • URLs prefixed with ~ are treated as a module request, similar to require('some-module/image.png'). You need to use this prefix if you want to leverage Webpack's module resolving configurations. For example if you have a resolve alias for assets, you need to use <img src="~assets/logo.png"> to ensure that alias is respected.

    • Root-relative URLs, e.g. /assets/logo.png are not processed at all.

    Getting Asset Paths in JavaScript

    In order for Webpack to return the correct asset paths, you need to use require('./relative/path/to/file.jpg'), which will get processed by file-loader and returns the resolved URL. For example:

    computed: {
    background () {
    return require('./bgs/' + this.id + '.jpg')
    }
    }

    Note the above example will include every image under ./bgs/ in the final build. This is because Webpack cannot guess which of them will be used at runtime, so it includes them all.

    "Real" Static Assets

    In comparison, files in static/ are not processed by Webpack at all: they are directly copied to their final destination as-is, with the same filename. You must reference these files using absolute paths, which is determined by joining build.assetsPublicPath and build.assetsSubDirectory in config.js.

    As an example, with the following default values:

    // config/index.js
    module.exports = {
    // ...
    build: {
    assetsPublicPath: '/',
    assetsSubDirectory: 'static'
    }
    }

    Any file placed in static/ should be referenced using the absolute URL /static/[filename]. If you change assetSubDirectory to assets, then these URLs will need to be changed to /assets/[filename].

    We will learn more about the config file in the section about backend integration.

vue单页面模板说明文档(2)的更多相关文章

  1. vue单页面模板说明文档(3)

    Environment Variables Sometimes it is practical to have different config values according to the env ...

  2. vue单页面模板说明文档(1)

    Introduction This boilerplate is targeted towards large, serious projects and assumes you are somewh ...

  3. vue render {} 对象 说明文档

    Vue学习笔记进阶篇——Render函数 http://www.mamicode.com/info-detail-1906336.html 深入data object参数 有一件事要注意:正如在模板语 ...

  4. Vue 单文件元件 — vTabs

    简书原文 这是我做了第二个单文件元件 第一个在这里vCheckBox 这次这个叫vTabs,用于操作标签页 演示DEMO 演示DEMO2 - 子组件模式及别名 演示DEMO3 - 极简模式 示例: h ...

  5. webpack入坑之旅(五)加载vue单文件组件

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

  6. SWFUpload 2.5.0版 官方说明文档 中文翻译版

    原文地址:http://www.cnblogs.com/youring2/archive/2012/07/13/2590010.html#setFileUploadLimit SWFUpload v2 ...

  7. 《暗黑世界GM管理后台系统》部署+功能说明文档

    http://www.9miao.com/product-10-1073.html <暗黑世界GM管理后台系统>部署+功能说明文档 <暗黑世界GM管理后台系统>部署+功能说明文 ...

  8. BasicExcel说明文档

    BasicExcel说明文档 BasicExcel原始链接:http://www.codeproject.com/Articles/13852/BasicExcel-A-Class-to-Read-a ...

  9. 处理 Vue 单页面应用 SEO 的另一种思路

    vue-meta-info 官方地址: monkeyWangs/vue-meta-info (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plu ...

随机推荐

  1. 推荐几本FPGA书籍(更新中)

    1.<数字信号处理的FPGA实现>第三版 讲解比较详细的DSP理论,使用FPGA实现,不过使用VHDL语言:也颇具参考性. 2. <Xilinx Zynq-7000 嵌入式系统设计与 ...

  2. js模块化规范—commonjs

    commonjs规范说明 每个js文件都可当作一个模块 在服务器端: 模块的加载是运行时同步加载的(不会阻塞,等待时间回比较长).在浏览器端: 模块需要提前编译打包处理 commonjs规范基本语法 ...

  3. node基础—process对象(管理进程)

    process对象概述 process对象是一个全局对象,可以在任何地方都能访问到他,通过这个对象提供的属性和方法,使我们可以对当前运行的程序的进程进行访问和控制 process 对象是一个 glob ...

  4. Hibernate知识点总结(一)

    前言:学习的过程在于不断的总结与思考,这里记下笔者在学习过程中,所遇到的知识点,增加对框架掌握的熟悉程度. 1.环境的搭建 通过maven可以轻松搭建hibernate的环境. <propert ...

  5. 1.02-get-params

    import urllib.request import urllib.parse import string def get_method_params(): url = "http:// ...

  6. python六十四课——高阶函数练习题(一)

    1.lt = ['sdfasdfa', 'ewqrewrewqr', 'dsafa12312fdsafd', 'safsadf'] --> 得到长度列表2.tp = ('TOM', 'Lilei ...

  7. Apache Shiro对象概念

    #,Authentication,认证,也就是验证用户的身份,就是确定你是不是你,比如通过用户名.密码的方式验证,或者某些第三方认证,比如微信认证. #,Authorization,授权,也叫访问控制 ...

  8. 解决 双显卡 y7000笔记本 (Dual Graphics) Ubuntu 18.04 GDM3 无法外接显示器

    sudo gedit /lib/systemd/system/gdm3.service 把其中的 ExecStartPre=/usr/share/gdm/generate-config 更改为 Exe ...

  9. Python:Day48 Jquery

    引用方式: <script src="jquery-3.3.1.js"></script> jQuery就是一个jQuery对象,可以简写成$ 基本语法:$ ...

  10. 3.if结构

    一.简单if结构1.定义:程序的条件判断2.语法:if(条件){ 语句块1}else{ 语句块2}语句块33:说明:条件必须是条件表达式,其结果必须是一个boolean类型 else是可选项,可以不写 ...