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. 一：1.2【print&input与变量和运算符】

    [路径] 绝对路径:从根目录开始链接的路径  --->cd C:\Windows\Boot\DVD\EFI\en-US 相对路径:不从根目录开始链接的路径 ----> cd Boot\DV ...

  2. POJ 2607 Fire Station

    Fire Station Time Limit: 5000ms Memory Limit: 65536KB This problem will be judged on PKU. Original I ...

  3. enterprise architect (EA) 源码生成UML类图，帮助理解项目工程

    用VS看大型工程代码,尤其是很多层类的,很容易头晕,即便是装了visual assist 插件.用VS生成类图吧,只能生成一堆框,只有一些小的类关系有箭头表示.远远不能满足要求.下面介绍建模工具EA来 ...

  4. MySQL中锁详解（行锁、表锁、页锁、悲观锁、乐观锁等）

    原文地址:http://blog.csdn.net/mysteryhaohao/article/details/51669741 锁,在现实生活中是为我们想要隐藏于外界所使用的一种工具.在计算机中,是 ...

  5. 洛谷——P2863 [USACO06JAN]牛的舞会The Cow Prom

    https://www.luogu.org/problem/show?pid=2863#sub 题目描述 The N (2 <= N <= 10,000) cows are so exci ...

  6. GridView中使用CheckBox

    asp.net中checkbox是向server提交时才干触发事件 把该控件的autopostback设置为true.才干响应事件  protected void Checkbox_CheckedCh ...

  7. spark 卡在spark context，运行出现spark Exception encountered while connecting to the server : javax.security.sasl.SaslException

    原因: 使用root用户运行spark代码 解决方法:使用非管理员账户运行spark即可 [userone@localhost bin]$ ./add-user.sh What type of use ...

  8. 安装Git和图形化软件[SouceTree跳过首次登陆]

    安装Git和图形化软件[SouceTree跳过首次登陆] 标签(空格分隔): 版本控制 安装GIT[客户端]: 下载:[https://git-scm.com/downloads/] 安装:[next ...

  9. Pycharm在创建py文件时,如何自动添加默认文件头注释?

    PyCharm是一款很好用的编写Python工程的IDE,用PyCharm创建一个Python文件或者向工程添加一个.py文件时,为了更好的使所编写的代码在各操作环境更好的运行,我们往往需要在.py文 ...

  10. 查询目标的ip地址和详细地理信息（多种方法）

    不多说,直接上干货! 至于这里怎FQ,很简单,请见我下面的博客! kali 2.0安装 lantern(成功FQ) shadowsocks(简称SSFQ软件)步骤详解 FQ软件lantern-inst ...