使用vue-loader 开发component环境搭建

1. 新建文件夹 vue-demo, 运行 npm init --yes.

2.建立如下文件

  - main.js 入口文件

  - App.vue vue 文件

  - index.html

  - webpack.config.js

webpack.config.js 内容如下

module.exports = {    //入口文件    entry:'./main.js',     //出口    output:{        path:__dirname,        filename:'build.js' //打包之后的文件,html模板中引入此文件    },};

3.引入webpack

npm install webpack --save -devnpm install webpack-dev-server --save -dev

修改package.json 文件，添加scripts

"scripts": {    "dev": "webpack-dev-server --inline --hot",}

4.引入vue相关module

npm install vue vue-template-compiler --save -dev

npm install vue-loader vue-html-loader css-loader style-loader file-loader   --save -dev

5.引入ES6模块

npm install babel-cli babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime --save -dev

在根目录下新建 .babelrc 文件

{    "presets":["es2015"]}

6.编写代码

• main.js
  

//引入Vueimport Vue from 'vue';//引入组件import App from './App.vue';//实例化Vuenew Vue({    el:'body',    components:{        app:App    }});

• App.vue

<template>    <h1>welcom vue</h1></template>