vue2.0 vue-loader

時間 2019-11-16

標籤 vue2.0 vue loader 简体版

原文原文鏈接

vue-cli
npm install
腳手架:  vue-loader
    1.0  -> 
    new Vue({
      el: '#app',
      components:{App}
    })    
    2.0->
    new Vue({
      el: '#app',
      render: h => h(App)
    })
vue2.0 
    vue-loader和vue-router配合

style-loader    css-loader

    style!css

index.htmlcss

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>vue-demo</title>
    <!-- <link rel="stylesheet" href="src/assets/css/animate.css"> 就不須要用loader了 -->
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
  </body>
</html>

main.jshtml

import Vue from 'vue'
import VueRouter from 'vue-router'

import App from './App.vue'
import routerConfig from './router.config.js'

import './assets/css/animate.css';
import './assets/css/1.css';

Vue.use(VueRouter);

const router=new VueRouter(routerConfig);


new Vue({
  router,
  el: '#app',
  render: h => h(App)
})

router.config.jsvue

import Home from './components/Home.vue'
import News from './components/News.vue'

export default{
    routes:[
        {path:'/home', component:Home},
        {path:'/news', component:News},
        {path:'*', redirect:'/home'}
    ]
}

App.vuenode

<template>
  <div id="app">
    {{msg}}
    <ul>
      <li>
        <router-link to="/home">主頁</router-link>
        <router-link to="/news">新聞</router-link>
      </li>
    </ul>
    <div>
      <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
        <router-view></router-view>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style>
html,body{ overflow:hidden; }
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

New.vuewebpack

<template>
    <div id="news">
        <h3>我是新聞頁</h3>
        <ul>
            <li v-for="(val,index) in news">
                {{val}}
            </li>
        </ul>
    </div>
</template>
<script>
    export default{
        name:'news',
        data(){
            return {
                news:['111111','22222222','3333333333','4444444444']
            }
        }
    }
</script>
<style>
    li{ border-bottom:1px dashed #dedede; }
</style>

Home.vueweb

<template>
    <h3>我是主頁</h3>
</template>

webpack.config.jsvue-router

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue',
        options: {
          // vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        loader: 'style!css' //順序定死的，不然不能loader Css,
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

package.jsonvue-cli

{
  "name": "vue-demo",
  "description": "A Vue.js project",
  "author": "strive <itstrive@sina.com>",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot --port 8085",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.0.1",
    "vue-router": "^2.0.1"
  },
  "devDependencies": {
    "animate.css": "^3.5.2",
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "style-loader": "^0.13.1",
    "vue-loader": "^9.7.0",
    "webpack": "^2.1.0-beta.25",
    "webpack-dev-server": "^2.1.0-beta.0"
  }
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。