webpack -> vue Component 从入门到放弃（四）

MycLambert 发布于2019-08-01 16:32 / 3299人阅读

摘要：先展示一下文件目录结构先把相关的依赖给装好注意一下注释只是为了解释，在中不能写注释插件加载器预编译语法跨平台环境用来设置命令行安装预编译语法的配置中的对象，用于处理目录的对象，提高开发效率。

Foreword

之前三篇大致介绍了webpack的用法，正如这个系列标题而言从webpack 到 vue Component,所以最后一篇文章当然是要讲 component, 不对应该说是结合使用，所以看官要是对 vue Component不是很了解的话，先去瞅瞅吧戳我带你去瞅瞅

Gabby

vue 官网对组件的介绍其实不少了，但是我第一次看 vue单文件组件的介绍的时候，一阵不明觉厉之风刮的我找不到北。

全局定义(Global definitions) 强制要求每个 component 中的命名不得重复

字符串模板(String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的

不支持CSS(No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏

没有构建步骤(No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器，如 Pug (formerly Jade) 和 Babel

这些缺点就促使了我们要使用 vue 单文件组件了，（看到这里，我心里有股莫名的高兴！！！）

然而，NM-MMP 后面就贴上了简单的 demo 图片(居然还只是图片)，然后后面就说 “有了 .vue 组件，我们就进入了高级 JavaScript 应用领域” 是不是很牛掰终于可以摆脱菜鸟的衣服了，但是，但是，但是，如果你不知道 Modern JavaScript with ES2015/16，不知道打包工具 webpack/Browserify，不知道 Node Package Manager (NPM)，好，很好，非常好，亲，你还没有准备好，请去啃一遍这些再来。。。。。

除了想撞墙我当时没有其他想法（幸好只是没用过webpack。。。）

Here we go

先展示一下文件目录结构：

node_modules

src

main.js

components

app.vue

second.vue

.babelrc

index.html

package.json

webpack.config.js

先把相关的依赖给装好(注意一下注释只是为了解释，在package.json中不能写注释)

"devDependencies": {
    "babel-core": "^6.0.0", //babel 插件
    "babel-loader": "^6.0.0", //babel-loader 加载器
    "babel-preset-es2015": "^6.0.0", //babel预编译es2015/es6语法
    "cross-env": "^3.0.0", //跨平台环境用来设置NODE-ENV
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "node-sass": "^4.5.0",
    "sass-loader": "^5.0.1",
    "vue": "^2.2.4",
    "vue-loader": "^10.0.0",
    "vue-template-compiler": "^2.1.0",
    "css-loader": "^0.26.2",
    "style-loader": "^0.13.2",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
  }

//命令行（CLI）安装
cnpm install

.babelrc

//预编译es6语法的配置
{
  "presets": [
    ["es2015", { "modules": false }]
  ]
}

webpack.config.js

// var webpack = require("webpack")
var path = require("path")
// NodeJS中的Path对象，用于处理目录的对象，提高开发效率。

module.exports = {
  // 入口文件地址，不需要写完，会自动查找
  entry: "./src/main.js",
  output: {
     // 文件地址，使用绝对路径形式
    path: path.resolve(__dirname, "./dist"),
    //[name]这里是webpack提供的根据路口文件自动生成的名字
    publicPath: "/dist/",
    filename: "[name].js"
  },
  module: {
    loaders: [
      // 解析.vue文件
      {
        test: /.vue$/, 
        loader: "vue-loader",
        options: {
          //解析.vue文件中样式表
          loaders: {
            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
            // the "scss" and "sass" values for the lang attribute to the right configs here.
            // other preprocessors should work out of the box, no loader config like this necessary.
            "scss": "vue-style-loader!css-loader!sass-loader",
            "sass": "vue-style-loader!css-loader!sass-loader?indentedSyntax"
          }
          // other vue-loader options go here
        }
      },
      // 转化ES6的语法
      {
        test: /.js$/,
        loader: "babel-loader",
        exclude: /node_modules/
      },
      //编译css并自动添加css前缀
      { 
        test: /.css$/, 
        loader: "style!css!autoprefixer"
      },
      //图片加上base64编码
      {
        test: /.(png|jpg|gif|svg)$/,
        loader: "file-loader",
        options: {
          name: "[name].[ext]?[hash]"
        }
      }
    ]
  },
  resolve: {
    // 别名，可以直接使用别名来代表设定的路径以及其他，在这个项目中没用到
    alias: {
      "vue$": "vue/dist/vue.common.js"
    }
  },
   // 服务器配置相关
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  // 开启source-map，webpack有多种source-map，在官网文档可以查到 eval-source-map 不能实现断电调试， source-map 和 cheap-module-source-map 就没问题
  devtool: "#eval-source-map"
}

src/main.js

//es6语法：
import Vue from "vue"
//外部引入别的库都可以用这样的方式，比如jquery等。。
//引入我们编写的测试用vue文件。
import App from "./components/app.vue";
                                     
new Vue({
    el:"#app",
    render: h => h(App)
})
//vue 里有关于 render 的介绍，我大概简要介绍一下这里的用途，h 是 vue 生态系统中作为 createElement 别名的通用惯例 也是 JSX 语法的要求。如果在作用域中 h 失去作用， 在应用中会触发报错。
//render 所创建的 h 函数 可以直接返回模板中dom元素，相当于
render: function(h){
    return h(App)
}
//个人觉得由于这里的App 是代表的 app.vue 这个组件文件，那么文件中的 标签中的 dom 元素将自动被拿来返回，当然还包括文件中的data属性之类的

src/components/second.vue



// scoped 让css只在这文件中生效 lang="scss" 不能写成 sass 打包会报错

src/components/app.vue

index.html


    
        
    
    
        
         //这是打包生成的main文件

Last step 更改 package.json

// 在 scripts 中加入 dev 之后直接通过 npm运行 项目中装的 webpack-dev-server,而不是使用全局的 webpack-dev-server

 "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --hot --inline --progress --color --port 80"
  }

运行(CIL)

npm run dev

ps:

如果想让他自动打开默认浏览器再选项 "dev" webpack-dev-server 后面加个 --open

--hot 与 --line 区别

// 不会刷新浏览器
$ webpack-dev-server
//刷新浏览器
$ webpack-dev-server --inline
//重新加载改变的部分，HRM(热替换)失败则刷新页面
$ webpack-dev-server  --inline --hot

Final

打开浏览器看看效果。这系列文章就全部结束，最后一篇间隔稍微长了点，不过还是没夭折~~~

webpack -> vue Component 从入门到放弃（三）
webpack -> vue Component 从入门到放弃（二）
webpack -> vue Component 从入门到放弃（一）
github源代码

私有云专线服务 spark从入门到前端从入门到精通云计算从入门到精通 html从入门到精通

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50582.html

wepback入门到放弃

摘要：四配置配置规则放在的数组里，每个是一个对象，是正则匹配，匹配文件后缀名，是要用是数组是所需要的是要加载哪些文件，是忽略掉哪些文件。实现解析，用会在写入在文件顶端导入中加入插件。最近研究webpack略有小成，特此写篇博客。虽然webpack有官网api,但是个人认为webpack api一点都不人性化，不自己研究研究，根本看不懂。今天先从写webpack-dev-server开始。...

blastz 2019-08-23 10:23 评论0 收藏0
Vue.js 服务端渲染业务入门实践

摘要：说起，其实早在出现之前，网页就是在服务端渲染的。没有涉及流式渲染组件缓存对的服务端渲染有更深一步的认识，实际在生产环境中的应用可能还需要考虑很多因素。选择的服务端渲染方案，是情理之中的选择，不是对新技术的盲目追捧，而是一切为了需要。作者：威威（沪江前端开发工程师）本文原创，转载请注明作者及出处。背景最近，产品同学一如往常笑嘻嘻的递来需求文档，纵使内心万般拒绝，身体倒是很诚实...

miya 2019-08-21 16:18 评论0 收藏0
Vuex从入门到放弃（webpack自动导入模块命名空间辅助函数）

摘要：从入门到放弃自动导入模块命名空间辅助函数什么是什么是状态管理，驱动应用的数据源，以声明方式将映射到视图，响应在上的用户输入导致的状态变化。最后重点来了外包在职萌新求内推位置广州 Vuex从入门到放弃（webpack自动导入模块命名空间辅助函数） 1.什么是vuex 1.1 什么是状态管理 state，驱动应用的数据源； view，以声明方式将 state 映射到视图； actio...

blankyao 2019-08-26 18:36 评论0 收藏0
vue-cli “从入门到放弃”

摘要：主要作用目录结构本地调试代码部署热加载单元测试在如今前端技术飞速发展的时代，和作为前端框架已经呈现出了三国鼎立的局面。主要作用：目录结构、本地调试、代码部署、热加载、单元测试在如今前端技术飞速发展的时代，angular.js、vue.js 和 react.js 作为前端框架已经呈现出了三国鼎立的局面。作为国人若你不知道 vue，小生表示可以理解，如果作为中国的前端猿不知道 vue，...

DrizzleX 2019-08-01 17:19 评论0 收藏0
vue-cli “从入门到放弃”

摘要：主要作用目录结构本地调试代码部署热加载单元测试在如今前端技术飞速发展的时代，和作为前端框架已经呈现出了三国鼎立的局面。主要作用：目录结构、本地调试、代码部署、热加载、单元测试在如今前端技术飞速发展的时代，angular.js、vue.js 和 react.js 作为前端框架已经呈现出了三国鼎立的局面。作为国人若你不知道 vue，小生表示可以理解，如果作为中国的前端猿不知道 vue，...

william 2019-08-20 18:28 评论0 收藏0
vue-cli “从入门到放弃”

摘要：主要作用目录结构本地调试代码部署热加载单元测试在如今前端技术飞速发展的时代，和作为前端框架已经呈现出了三国鼎立的局面。主要作用：目录结构、本地调试、代码部署、热加载、单元测试在如今前端技术飞速发展的时代，angular.js、vue.js 和 react.js 作为前端框架已经呈现出了三国鼎立的局面。作为国人若你不知道 vue，小生表示可以理解，如果作为中国的前端猿不知道 vue，...

klinson 2019-08-05 11:45 评论0 收藏0