手动搭建webpack + vue + loader

vue-loader

说明:webpack模块加载起,一切东西都是模块;vueloader基于webpack

.vue文件结构：

<template>
</template>

<script>
</script>

<style>
</style>

简单的目录结构

• index.html
• main.js 入口文件
• App.vue vue文件
• package.json 工程文件（项目依赖，名称,配置）
  
  • npm init –yes生成

• webpack.config.js webpack配置文件

  • webpack.config.js配置

    module.exports={
        //入口文件
        entry:'./main.js',
        //出口文件
        output:{
            //当前路径
            path:__dirname,
            filename:'build.js'
        }
    };

    ES6模块化开发

  • 导入模块

    • export default {}
  • 引入模块
    
    • import 模块名 form 地址
      webpack准备工作
  • cnpm install webpack –save-dev

  • cnpm install webpack-dev-server –save-dev

    • App.vue
      
      • 变成正常代码 －> vue-loader@8.5.4
      • cnmp install vueloader@8.5.4

  • 配置启动文件webpack.config.js

        module.exports={
            //入口文件
            entry:'./main.js',
            //出口文件
            output:{
                path:__dirname,
                filename:'build.js'
            },
            module:{
                loaders:[
                    {test:/\.vue$/, loader:'vue'},
                    {test:/\.js$/, loader:'babel', exclude:/node_modules/}
                ]
            },
            babel:{
                presets:['es2015'],
                plugins:['transform-runtime']
            }
        };  

  • package.json 工程文件

    {
      "name": "vue-loader-demo",
      "version": "1.0.0",
      "description": "",
      "main": "main.js",
      "scripts": {
            "dev": "webpack-dev-server --inline --hot",
            "build":"webpack -p"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "babel-core": "^6.17.0",
        "babel-loader": "^6.2.5",
        "babel-plugin-transform-runtime": "^6.15.0",
        "babel-preset-es2015": "^6.16.0",
        "babel-runtime": "^6.11.6",
        "css-loader": "^0.25.0",
        "vue-hot-reload-api": "^1.3.2",
        "vue-html-loader": "^1.2.3",
        "vue-loader": "^8.5.4",
        "vue-style-loader": "^1.0.0",
        "webpack": "^2.6.1",
        "webpack-dev-server": "^2.4.5"
      },
      "dependencies": {
        "vue": "^1.0.28",
        "vue-router": "^0.7.13"
      }
    }
    

  • cnpm配置
    

    npm install -g cnpm –registry=https://registry.npm.taobao.org

  • 启动

    npm run dev

  vue-loader

  • cnpm install vue-html-loader css-loader vue-style-loader vue-hot-reload-api@1.3.2 –save-dev*
    
  • bable-loader
  • bable-core
  • bable-plugin transform-runtime
  • babel-preset-es2015
  • babel-runtime

  • cnpm install babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime –save-dev

  • install vue

    cnpm install vue@1.0.28 –save

• 路由配合vue-loader使用

  1.下载vue-router模块

  cnmp install vue-router@0.7.13

  2.import VueRouter from ‘vue-router’

  3.Vue.use(VueRouter)

  4.配置路由

  const router = new VueRouter();
  
  router.map({
      'home':{
          component:Home
      },
      'news':{
          component:News
      }
  });

  5.开启路由

  router.start(App.”#app”)

  6.上线

  npm run build->webpack -p

vue脚手架

• vue-cli—————-脚手架
• 帮你提供好基本的项目结构

本身集成很多的项目模版

• simple
• webpack
• webpack-simple

基本的使用流程

• 安装vue命令环境

  nmp install vue-cli -g

• 验证是否安装

  vue –version

• 生成项目模版

  vue init simple vue-simple-demo(没有)
  vue init webpack#1.0 vue-webpack-demo(大型项目使用,检测代码,单元测试)
  vue init webpack-simple（推荐）

• 进入到生成目录里面

  npm install

• 运行项目

  npm run dev

• 修改端口号在config/index.js