zoukankan      html  css  js  c++  java

  • 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.html

    <!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.js

    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.js

    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.vue

    <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.vue

    <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.vue

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

    webpack.config.js

    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.json

    {
  "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"
  }
}
  • 相关阅读:
    项目准备和启动——项目投标
    项目准备和启动——项目可行性分析
    项目准备和启动——项目建议书
    软件项目管理
    项目管理知识体系
    项目的生命周期
    项目管理基本方法
    什么是项目管理？
    Python基础学习——第一弹
    redis
  • 原文地址：https://www.cnblogs.com/yaowen/p/6988692.html
Copyright © 2011-2022 走看看