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. Linux重新命名文件夹

    linux 重命名文件和文件夹   linux下重命名文件或文件夹的命令mv既可以重命名,又可以移动文件或文件夹. 例子:将目录A重命名为B mv A B 例子:将/a目录移动到/b下,并重命名为c ...

  2. logging.config模块---使用配置文件管理logger

    logging配置文件 一.使用到的模块: logging.config 官方文档: https://docs.python.org/3/library/logging.config.html 非官方 ...

  3. iOS开发——循环遍历的比较

    常用的有for in.for循环.EnumerateObjectsUsingBlock 1.小规模的数据无所谓,但是对大量数据,for in 的遍历速度非常之快,不是for循环能比的: 2.对于数组, ...

  4. CodeForces-1007A Reorder the Array 贪心 田忌赛马

    题目链接:https://cn.vjudge.net/problem/CodeForces-1007A 题意 给个数组,元素的位置可以任意调换 问调换后的元素比此位置上的原元素大的元素个数最大多少 思 ...

  5. 一张图说docker

  6. #error 、 #line 和 #pragma 的使用

    1. #error 的用法 (1)#error 是一种预编译器指示字,用于生成一个编译错误消息 (2)用法:#error message //注意:message 不需要用双引号包围 (3)#erro ...

  7. Linux文件属性（属主属组权限）

    Linux文件属性 Linux系统是一种典型的多用户系统,不同的用户处于不同的地位,拥有不同的权限.为了保护系统的安全性,Linux系统对不同的用户访问同一文件(包括目录文件)的权限做了不同的规定. ...

  8. String spilt时转义特殊字符【转】

    在使用String.split方法分隔字符串时,分隔符如果用到一些特殊字符,可能会得不到我们预期的结果. 我们经常使用public String[] split(String regex)方法来拆分一 ...

  9. Informatica环境搭建过程中一些问题-近期项目进了新人，在搭建环境中存在一些问题，之前都处理过一直没有整理，这次接着机会，把这些常见问题处理整理出来

    一.Informatica9.5.1创建资源库出错找不到libpmora8.so 错误如下: Database driver event...Error occurred loading librar ...

  10. 使用IR2101半桥驱动电机的案例

    作为一个电机驱动开发方面的菜鸟,近日研究了一下通过MOS管对整流后的电源斩波用以驱动直流电机进行调速的方案. 在驱动的过程中,遇到了很多问题,当然也有很多的收获. 写下来以供自己将来查阅,也为其他菜鸟 ...