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. WPF打字机效果

    public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); TypewriteTex ...

  2. light oj 1317

    Description You probably have played the game "Throwing Balls into the Basket". It is a si ...

  3. 【Unity】近期整理Unity4.x 项目升级Unity5.0 过程中出现的各种常见问题，与大家共享。

    近期整理Unity4.x 项目升级Unity5.0 过程中出现的各种常见问题,与大家共享. 1:Unity4.x 项目中3D模型其材质丢失,成为"白模"?       解决方式:手 ...

  4. pycharm第一个Python程序

    print ("Hello word!"); 这是Python3.xx的语法!

  5. Python: PS 滤镜--碎片特效

    本文用 Python 实现 PS 滤镜中的碎片特效,这个特效简单来说就是将图像在 上,下,左,右 四个方向做平移,然后将四个方向的平移的图像叠加起来做平均.具体的效果图可以参考之前的博客 http:/ ...

  6. 使用caffemodel模型（由mnist训练）测试单张手写数字样本

    caffe中训练和测试mnist数据集都是批处理,可以反馈识别率,但是看不到单张样本的识别效果,这里使用windows自带的画图工具手写制作0~9的测试数字,然后使用caffemodel模型识别. 1 ...

  7. Android Button 按钮 设置 各种状态 图片 颜色

    有2个方法可以实现,一种是用 选择器 定义每种状态的图片 selec.xml <?xml version="1.0" encoding="utf-8"?& ...

  8. ASP.NET Identity 角色管理（Roles）

    当我们使用ASP.NET 4.5创建模板项目时,会发现模板只提供了ApplicationUserManager用于用户的登录注册.修改.设置等,而没有提供与用户角色相关的代码,对此就需要我们自己手动的 ...

  9. struts2连接mysql多表查询

    下载地址:http://download.csdn.net/detail/qq_33599520/9786567 项目结构: 代码: package com.mstf.action; import j ...

  10. PostgreSQL Replication之第四章 设置异步复制（5）

    4.5 使流复制更健壮 当连接到master时,slave要做的第一件事情是赶上master.但是,这会一直工作吗?我们已经看到,我们可以使用由基于流和基于文件组成的混合设置.这给了我们一些额外的安全 ...