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. SpringBoot 获取客户端 ip

    /** * 获取客户端ip地址 * @param request * @return */ public static String getCliectIp(HttpServletRequest re ...

  2. Mybatis传递多个参数的解决办法(三种)

    第一种方案 DAO层的函数方法 Public User selectUser(String name,String area); 对应的Mapper.xml <select id="s ...

  3. vue生命周期-学习心得

    每个Vue实例在被创建之前都要经过一系列的初始化过程,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,这个过程就是vue的生命周期. 1 vue生命周期图 {: ...

  4. mysql日期加减运算

    MySQL 日期类型MySQL 日期类型:日期格式.所占存储空间.日期范围 比较. 日期类型        存储空间       日期格式                 日期范围 --------- ...

  5. LVM的创建与挂载

    LVM的诞生: 由于传统的磁盘管理不能对磁盘进行磁盘管理,比如我把/dev/sdb1挂载到了/liu目录下,但是因为数据量过大的原因,此文件系统磁盘利用率已经高达98%,那么我可以直接对这个磁盘进行扩 ...

  6. 题解 P3369 【【模板】普通平衡树】

    在网上某篇神奇的教程和@codesonic 大佬的标程帮助下,我又肝完了Leafy Tree,跑过来写篇题解(好像以前写过一篇?) 什么是Leafy Tree? Leafy Tree由两种节点组成:辅 ...

  7. 通过force index了解的MySQL查询的性能优化

    查询是数据库技术中最常用的操作.查询操作的过程比较简单,首先从客户端发出查询的SQL语句,数据库服务端在接收到由客户端发来的SQL语句后, 执行这条SQL语句,然后将查询到的结果返回给客户端.虽然过程 ...

  8. 11g v$wait_chains 与 hanganalyze

    11g之后,通过v$wait_chains视图诊断数据库hang和Contention   11g之前,通常我们数据库hang住了之后,我们会对数据库做hang analyze来进行分析,在11g之后 ...

  9. Redis允许远程连接

    默认安装启动redis后,只能本地连接,无法远程连接上,原因是redis安全策略默认本机访问,所以远程访问的话需要将 配置文件redis.cof 中的 bind 127.0.0.1 前面的#注释掉, ...

  10. java9新特性-8-语法改进:钻石操作符(Diamond Operator)使用升级

    1.使用说明 我们将能够与匿名实现类共同使用钻石操作符(diamond operator) 在java8中如下的操作是会报错的:   编译报错信息:'<>' cannot be used ...