• vue-loader配合webpack的使用及安装:
  1. 工程文件简单的目录结构

  index.html

  main.js   入口文件

  App.vue   vue文件,官方推荐命名法

  package.json   工程文件(项目依赖,名称,配置)

       npm init --yes   生成

  webpack.config.js   webpack配置文件

ps:  es6模块化开发  导出模块:export default {}   引入模块:import 模块名 from 地址

  1. webpack的准备工作

  cnpm install webpack --save-dev

  cnpm install webpack-dev-server --save-dev

  App.vue -> 变成正常代码  vue-loader@8.5.4

  cnpm install vue-laoder@8.5.4 --save-dev

  cnpm install vue-html-loader --save-dev

     vue-html-loader  css-loader  vue-style-loader vue-hot-reload-api@1.3.2

vue-loader配合webpack的使用及安装的更多相关文章

  1. webpack常用的插件安装命令

    webpack常用的插件安装命令:1:npm install html-webpack-plugin --save-dev //自动快速的帮我们生成HTML.2:npm install css-loa ...

  2. React配合Webpack实现代码分割与异步加载

    这是Webpack+React系列配置过程记录的第四篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  3. Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇——纯前端多页面)

    Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇--纯前端多页面) @(HTML/JS) 一般来说,使用vue做成单页应用比较好,但特殊情况下,需要使用多页面也有另外 ...

  4. vue 快速入门 系列 —— vue loader 上

    其他章节请看: vue 快速入门 系列 vue loader 上 通过前面"webpack 系列"的学习,我们知道如何用 webpack 实现一个不成熟的脚手架,比如提供开发环境和 ...

  5. vue+node+es6+webpack创建简单vue的demo

    闲聊: 小颖之前一直说是写一篇用vue做的简单demo的文章,然而小颖总是给自己找借口,说没时间,这一没时间一下就推到现在了,今天抽时间把这个简单的demo整理下,给大家分享出来,希望对大家也有所帮助 ...

  6. 用Vue.js和Webpack开发Web在线钢琴

    缘起 由于童心未泯,之前在手机上玩过钢琴模拟App,但是手机屏幕太小,始终觉得不过瘾.其实对于我这个连基本乐理都不懂的"乐盲"来说,就算给我一台真正的钢琴,我也玩不转.不过是图个新 ...

  7. Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(下篇——多页面VueSSR+热更新Server)

    Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(下篇--多页面VueSSR+热更新Server) @(HTML/JS) 这是Vue多页面框架系列文章的第二篇,上一篇(纯前 ...

  8. [Vue] karme/jasmine/webpack/vue搭建测试环境

    karma 和 jasmine karma 是 google 开源的一个基于 Node.js 的 JavaScript 前端测试运行框架,前身叫 Testacular. jasmine 是一个 jav ...

  9. Vue(四)之webpack和vue-cli

    01-webpack介绍 官方文档:https://www.webpackjs.com/concepts/ 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(modu ...

随机推荐

  1. yii2 可逆加密

    加密: $data 是你要加密的内容, $secretKey 是你自己设置的salt, $encryptedData = Yii::$app->getSecurity()->encrypt ...

  2. Linux常用命令和Shell编程基础

    目录相关 cd - .与.. 分别表示当前目录和父目录 - ~与$HOME 都是指当前用户的主目录 - cd – 切换到上一次所在的目录(不一定是父目录) pwd - pwd 显示当前目录 - $PW ...

  3. 关于C++中的cout

    最近恰好看到qq群里有讨论cout的问题,发现自己对于cout的运行机制也不怎么明白,所以就仔细研究了下这个东西. 如下是c++ reference中cout的定义 extern ostream co ...

  4. Android 项目结构图

    src:存放Java源代码 gen:存放系统自动生成的配置文件 Android 4.4.2:包含Android.jar文件,包含构建应用程序所需的所有Android SDK库 asssets:存放资源 ...

  5. Sublime Text 3 Plugin Better!

    Package Control Cmake ConvertUTF Markdown preview MarkdownEditing Marking Changed Rows

  6. javascript星级评分(多个)

    JS打多个类型星级评分: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

  7. Android中矢量动画

    Android中矢量动画 Android中用<path> 标签来创建SVG,就好比控制着一支画笔,从一点到一点,动一条线. <path> 标签 支持一下属性 M = (Mx, ...

  8. php周计划1

    2016.09.07-2016.09.11 2016.09.07  速成教程 javascript基础 遇到问题:盒子模型中“回”定位问题未解决 css定位:css有三种基本的定位机制 1.普通流:元 ...

  9. [mark] 使用Sublime Text 2时如何将Tab配置为4个空格

    在Mac OS X系统下,Sublime Text是一款比较赞的编辑器. 作为空格党的自觉,今天mark一下使用Sublime Text 2时如何将Tab配置为4个空格: 方法来自以下两个链接: ht ...

  10. flex实验总结

    1.父元素 .box{ display:flex; flex-direction: column;//铺满垂直排列 flex-direction: column-reverse;//铺满垂直反向排列 ...