• vue单文件组件实例1:简单单文件组件


    HelloWorld.vue:

    <template>
      <div class="hello">
        <h1>{{msg}}</h1>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      data: function (){
        return {
          msg: 'Welcome to Your Vue.js App!'
        }
      }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
      h1, h2 {
        font-weight: normal;
      }
    
      ul {
        list-style-type: none;
        padding: 0;
      }
    
      li {
        display: inline-block;
        margin: 0 10px;
      }
    
      a {
        color: #42b983;
      }
    </style>
    

    index.js:

    import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        }
      ]
    })
    

    App.vue:

    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <router-view/>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App'
    }
    </script>
    
    <style>
    #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;
    }
    </style>
    

    main.js:

    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router' //router固定
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    });
    

    package.json:

    {
      "name": "vue-cli2",
      "version": "1.0.0",
      "description": "A Vue.js project",
      "author": "samve <samveduan@163.com>",
      "private": true,
      "scripts": {
        "dev": "webpack-dev-server --inline --open --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev",
        "build": "node build/build.js"
      },
      "dependencies": {
        "vue": "^2.5.2",
        "vue-router": "^3.0.1"
      },
      "devDependencies": {
        "autoprefixer": "^7.1.2",
        "babel-core": "^6.22.1",
        "babel-helper-vue-jsx-merge-props": "^2.0.3",
        "babel-loader": "^7.1.1",
        "babel-plugin-syntax-jsx": "^6.18.0",
        "babel-plugin-transform-runtime": "^6.22.0",
        "babel-plugin-transform-vue-jsx": "^3.5.0",
        "babel-preset-env": "^1.3.2",
        "babel-preset-stage-2": "^6.22.0",
        "chalk": "^2.0.1",
        "copy-webpack-plugin": "^4.0.1",
        "css-loader": "^0.28.0",
        "extract-text-webpack-plugin": "^3.0.0",
        "file-loader": "^1.1.4",
        "friendly-errors-webpack-plugin": "^1.6.1",
        "html-webpack-plugin": "^2.30.1",
        "node-notifier": "^5.1.2",
        "optimize-css-assets-webpack-plugin": "^3.2.0",
        "ora": "^1.2.0",
        "portfinder": "^1.0.13",
        "postcss-import": "^11.0.0",
        "postcss-loader": "^2.0.8",
        "postcss-url": "^7.2.1",
        "rimraf": "^2.6.0",
        "semver": "^5.3.0",
        "shelljs": "^0.7.6",
        "uglifyjs-webpack-plugin": "^1.1.1",
        "url-loader": "^0.5.8",
        "vue-loader": "^13.3.0",
        "vue-style-loader": "^3.0.1",
        "vue-template-compiler": "^2.5.2",
        "webpack": "^3.6.0",
        "webpack-bundle-analyzer": "^2.9.0",
        "webpack-dev-server": "^2.9.1",
        "webpack-merge": "^4.1.0"
      },
      "engines": {
        "node": ">= 6.0.0",
        "npm": ">= 3.0.0"
      },
      "browserslist": [
        "> 1%",
        "last 2 versions",
        "not ie <= 8"
      ]
    }
    
  • 相关阅读:
    【BZOJ3995】[SDOI2015]道路修建 线段树区间合并
    [Noip2016]天天爱跑步 LCA+DFS
    【BZOJ2870】最长道路tree 点分治+树状数组
    【BZOJ3730】震波 动态树分治+线段树
    【BZOJ2969】矩形粉刷 概率+容斥
    【BZOJ3029】守卫者的挑战 概率+背包
    【BZOJ3043】IncDec Sequence 乱搞
    【BZOJ3124】[Sdoi2013]直径 树形DP(不用结论)
    Django学习笔记之ORM多表操作
    SQL学习笔记之项目中常用的19条MySQL优化
  • 原文地址:https://www.cnblogs.com/samve/p/10364464.html
Copyright © 2020-2023  润新知