vue的使用

发表于 分类于

vue-cli 集成 flexible

链接：基于 vue-cli 配置移动端自适应 | Hzzly

vue-cli 构建项目在 index.html 中使用静态文件

在 src 同一个目录下建立 static 文件夹（vue-cli 自身就有），所有的静态文件都必须在这个文件夹下，才能在 html 文件中调用到。因为 cli 启用了静态文件功能，在dev-server.js中可以看到这段代码

1
2
3
4
5
6
// serve pure static assets
var staticPath = path.posix.join(
  config.dev.assetsPublicPath,
  config.dev.assetsSubDirectory,
)
app.use(staticPath, express.static('./static'))

config/index.js中找到配置代码如下：

1
2
3
4
5
6
dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

参考资料：vue-cli 构建项目在 index.html 中使用静态文件 - JohnZhu - 博客园

data-v-xxxxxxxx=””

如果 style 使用 scoped 属性,则该 style 标签内含的样式只会被本 vue 文件的元素使用。以data-v-xxxxxx=''的形式展示

参考资料：vuejs2 - random "data-v-*" attribute in Vue.js components - Stack Overflow

cli3.0 一些细节

  • 不同环境的全局变量

    1
    2
    3
    4
    .env                # 在所有的环境中被载入
    .env.local          # 在所有的环境中被载入，但会被 git 忽略
    .env.[mode]         # 只在指定的模式中被载入
    .env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

    默认有 development, production,test 三个环境，BASE_URL 和 BASE_BASE_ENV 两个变量。只有以 VUE_APP_开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。

  • 现代模式的编译

    vue-cli-service build --modern会产生两个应用的版本：一个现代版的包，面向支持 ES modules 的现代浏览器，另一个旧版的包，面向不支持的旧浏览器。

    • 现代版的包会通过 <script type="module"> 在被支持的浏览器中加载；它们还会使用 <link rel="modulepreload"> 进行预加载。
    • 旧版的包会通过 <script nomodule> 加载，并会被支持 ES modules 的浏览器忽略。

  • 生产环境取消 source map

    1
    2
    3
    4
    // vue.config.js
    module.exports = {
      productionSourceMap: false,
    }