vue单文件组件2(webpack打包)

一、生产环境部署

开发环境下,Vue 会提供很多警告来帮你对付常见的错误与陷阱。而在生产环境下,这些警告语句却没有用,反而会增加应用的体积。此外,有些警告检查还有一些小的运行时开销,这在生产环境模式下是可以避免的。

1)不使用构建工具

如果用 Vue 完整独立版本,即直接用 <script> 元素引入 Vue 而不提前进行构建,请记得在生产环境下使用压缩后的版本 (vue.min.js)

2)使用构建工具

当使用 webpack 或 Browserify 类似的构建工具时,Vue 源码会根据 process.env.NODE_ENV决定是否启用生产环境模式,默认情况为开发环境模式。在 webpack 与 Browserify 中都有方法来覆盖此变量,以启用 Vue 的生产环境模式,同时在构建过程中警告语句也会被压缩工具去除

 

二、vue单文件组件

关注点分离不等于文件类型分离。在一个组件里,其模板、逻辑和样式是内部耦合的,并且把他们搭配在一起实际上使得组件更加内聚且更可维护。

vue-loader 是一个 Webpack 的 loader,可以将vue单文件组件转换为 JavaScript 模块

.vue 文件是一个自定义的文件类型,用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块 <template><script> 和 <style>,还允许添加可选的自定义块。

vue-loader 会解析文件,提取每个语言块,如有必要会通过其它 loader 处理,最后将他们组装成一个 CommonJS 模块,module.exports 出一个 Vue.js 组件对象。

 

1、ES2015

当项目中配置了 babel-loader 或者 buble-loadervue-loader 会使用他们处理所有 .vue 文件中的 <script>部分,允许我们在 Vue 组件中使用 ES2015。babel-loader可以将ES6代码转为ES5代码,从而在现有环境执行。

复制代码
<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  components: {
    ComponentA,
    ComponentB
  }
}
</script>
复制代码

我们使用 ES2015 的属性的简洁表示法去定义子组件,{ ComponentA } 是 { ComponentA: ComponentA } 的简写,Vue 会自动的将 key 转换为component-a,所以你可以在 template 中使用 <component-a>

由于 vue-loader 只处理 .vue 文件,你需要告诉 Webpack 如何使用 babel-loader 或者 buble-loader 处理普通.js 文件。

1)babel安装:npm install --save-dev babel-loader babel-core

2)通过 config 方式使用(webpack.config.js):

module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } ] }

(exclude:排除node_modules这个模块,提高打包速度)

3)使用 .babelrc 配置 Babel

虽然已经配置好了 Babel ,但并没有让它真正生效。在项目的根目录中创建一个 .babelrc 的文件并启用一些 plugin 。首先,你可以使用转换 ES2015+ 的 env preset 。

npm install babel-preset-env --save-dev

.babelrc文件
{
  "presets": ["env"]
}

2,
<style>
scoped
<style>/* 全局样式 */</style>
<style scoped>/* 本地样式 */</style>
<style lang="sass"> /* write sass here */ </style>
复制代码
/*webpack.config.js*/
module: {
    rules: [
         {//loader的处理顺序为从右至左
            test: /\.scss$|\.sass$/,
            use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
        },
        {
            test: /\.less$/,
            use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
        },
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader', 'postcss-loader']
        }
    ]
}
复制代码
1)css-loader:解析css,style-loader:将处理后的样式插入到页面的head标签内;
css-loader
style-loader之后
sass loader或less loader之前;
autoprefixer:根据当前浏览器给css加上必要的前缀以兼容该浏览器,同时移除不必要的css前缀。
a)安装:
postcss-loader autoprefixer 
b)在目录中创建postcss.config.js文件
c)
postcss.config.js引入
autoprefixer插件
module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}
3)sass-loader:将scss转换为css
安装:cnpm install sass-loader node-sass webpack --save-dev
posted @   Colorful_coco  阅读(2699)  评论(0编辑  收藏  举报
编辑推荐:
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· .NET 进程 stackoverflow异常后,还可以接收 TCP 连接请求吗?
阅读排行:
· 本地部署 DeepSeek:小白也能轻松搞定!
· 基于DeepSeek R1 满血版大模型的个人知识库,回答都源自对你专属文件的深度学习。
· 在缓慢中沉淀,在挑战中重生!2024个人总结!
· 如何给本地部署的DeepSeek投喂数据,让他更懂你
· 大人,时代变了! 赶快把自有业务的本地AI“模型”训练起来!
点击右上角即可分享
微信分享提示