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"

  }

}

vue2.0 vue-loader的更多相关文章

  1. vue2.0 vue.set()

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. vue2.0 vue.extend()的拓展

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Vue2.0 Vue.set的使用

    原文链接: https://blog.csdn.net/qq_30455841/article/details/78666571

  4. VUE2.0学习总结

    摘要: 年后公司项目开始上vue2.0,自己对学习进行了总结,希望对大家有帮助! VUE2.0学习 vue介绍 vue是什么? https://vuefe.cn/guide vue也是一个数据驱动框架 ...

  5. vue1.0和vue2.0的区别(二)

    这篇我们继续之前的vue1.0和vue2.0的区别(一)继续说 四.循环 学过vue的同学应该知道vue1.0是不能添加重复数据的,否则它会报错,想让它重复添加也不是不可以,不过需要定义别的东西 而v ...

  6. Vue2.0总结———vue使用过程常见的一些问题

    Vue目前的的开发模式主要有两种:1.直接页面级的开发,script直接引入Vue2.工程性开发,webpack+loader或者直接使用脚手架工具Vue-cli,里面的文件都配置好了 webpack ...

  7. vue 专题 vue2.0各大前端移动端ui框架组件展示

    Vue 专题 一个数据驱动的组件,为现代化的 Web 界面而生.具有可扩展的数据绑定机制,原生对象即模型,简洁明了的 API 组件化 UI 构建 多个轻量库搭配使用 请访问链接: https://ww ...

  8. vue2.0实践 —— Node + vue 实现移动官网

    简介 使用 Node + vue 对公司的官网进行了一个简单的移动端的实现. 源码 https://github.com/wx1993/node-vue-fabaocn 效果 组件 轮播图(使用 vu ...

  9. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║Vue基础：JS面向对象&字面量& this字

    缘起 书接上文<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史>,昨天咱们说到了以我的经历说明的web开发经历的 ...

  10. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十六 ║Vue基础：ES6初体验 & 模块化编程

    缘起 昨天说到了<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇:JS对象&字面量&this>,通过总体来看,好像大家对这一块不是很 ...

随机推荐

  1. /www: target is busy. 解决卸载磁盘目录繁忙的问题

    umount /www 卸载磁盘遇到 以下问题 umount: /www: target is busy. (In some cases useful info about processes tha ...

  2. WebSocket 前端封装

    $.extend({ socketWeb:function (opt) { if("WebSocket" in window){ var setting=$.extend({ ur ...

  3. HDU 6051 If the starlight never fade（原根+推式子）

    题目大意: 设\(f(i)\)为使\((x+y)^i \equiv x^i (mod\ p)\)成立的(x,y)的对数.其中\(1 \leq x \leq p-1 , 1\leq y\leq m\), ...

  4. c指针学习小结(参考别人总结的经验)

    指针学习与总结一.1.int *p :p与*先结合,说明p是一个指针,然后与int结合说明指向的是一个int型的.2.int p[3] :p与[]结合说明p是一个数组,然后与int结合,说明数组里的元 ...

  5. HDU 2295 Radar 重复覆盖 DLX

    题意: N个城市,M个雷达站,K个操作员,问雷达的半径至少为多大,才能覆盖所有城市.M个雷达中最多只能有K个同时工作. 思路: 二分雷达的半径,看每个雷达可以覆盖哪些城市,然后做重复覆盖,判断这个半径 ...

  6. hdu 4786 Fibonacci Tree 乱搞 智商题目 最小生成树

    首先计算图的联通情况,如果图本身不联通一定不会出现生成树,输出"NO",之后清空,加白边,看最多能加多少条,清空,加黑边,看能加多少条,即可得白边的最大值与最小值,之后判断Fibo ...

  7. HTML5实战与剖析之媒体元素(3、媒体元素的事件及方法)

    HTML5中的媒体元素除了拥有非常多的属性之外,video标签和audio标签还能够出发非常多事件和方法. 这些方法监控着不同的属性的变化,这些变化有可能是媒体播放的结果,也可能是用户操作媒体的结果. ...

  8. 即将到来的Autodesk 主要产品2015版 产品和API新功能在线培训（免费）

    一年一度的Autodesk主要产品和API在线培训课程在5月份即将開始.我们呈献给大家5个课程. 1. Revit 2015 产品新功能及API 概览 2. Vault 2015产品新功能及API 概 ...

  9. Qt5的插件机制（1）--Qt 框架中的插件载入机制概述

    概述 Qt的源代码中通过 Q<pluginType>Factory.Q<pluginType>Plugin 和 Q<pluginType> 这三个类实现了Qt的插件 ...

  10. Unity 相机花式分屏

    花式分屏,顾名思义,可以实现各种不规则几何边界的分屏,是无法直接通过调整相机视口能达到效果的(只能实现矩形的分屏),例如斜对角分屏,几何图形分屏: 假设我们有两个相机,需要上面的斜对角分屏画面,和镜子 ...