vue2.0的初始化,使用 webpack构建工具生成的项目

直接上代码

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'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

new vue:表示 创建了一个Vue对象的实例

el:'#app' :表示 将刚创建的Vue对象实例 挂载 指定的Dom元素中，本项目是index.html文件的<div id="app"></div>。

思想就像下面是使用jQuery、JS拼接菜单的Java项目中，JS中"变量html"把结果赋给了html元素nav

<ul id="nav" class="nav">

 function drawTopNav(data) {

         var html = [];

         $.each(data, function(i, menu) {

             html.push('<li><div class="nav-header"><a iconClass='+menu.ICON_CLASS+' class="firstNode" id="firstNode'

                     + menu.ID

                     + '" href="'

                     + (!menu.URL || menu.URL == 'null' ? 'javascript:void(0);'

                             : menu.URL) + '"><img src="'+menu.IMG_URL+'"><h2>'

                     + menu.NAME + '</h2></a></div></li>');

             firstArr[menu.ID] = menu;

         });

         $("#nav").html(html.join(''));

         $(".firstNode").bind("click", firstNodeClicked);

         $(".firstNode").first().click();

     }
render: h => h(App)：作用是渲染视图，作为填充的内容给挂载点el，这是vue2.0的写法
----
下面是vue1.0的写法
components: { App },

template: '<App/>'
components: { App }，作用是 注册组件信息
template: '<App/>'作用是 简写的模板调用组件的标签

实际上这两行代码的作用是一样的,
作用是渲染视图，作为填充的内容给挂载点el
 

index.html文件

 <!DOCTYPE html>

 <html>

   <head>

     <meta charset="utf-8">

     <meta name="viewport" content="width=device-width,initial-scale=1.0">

     <title>test_vue</title>

   </head>

   <body>

     <div id="app"></div>

     <!-- built files will be auto injected -->

   </body>

 </html>

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>

router文件下的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

     }

   ]

 })

components文件夹下的HelloWorld.vue文件

 <template>

     <div class="hello">

         <h1>{{ msg }}</h1>

         <h2>Essential Links YYYYYY 2019</h2>

         <ul>

             <li>

                 <a href="https://vuejs.org" target="_blank">

                     Core Docs

                 </a>

             </li>

             <li>

                 <a href="https://forum.vuejs.org" target="_blank">

                     Forum

                 </a>

             </li>

             <li>

                 <a href="https://chat.vuejs.org" target="_blank">

                     Community Chat

                 </a>

             </li>

             <li>

                 <a href="https://twitter.com/vuejs" target="_blank">

                     Twitter

                 </a>

             </li>

             <br>

             <li>

                 <a href="http://vuejs-templates.github.io/webpack/" target="_blank">

                     Docs for This Template

                 </a>

             </li>

         </ul>

         <h2>Ecosystem</h2>

         <ul>

             <li>

                 <a href="http://router.vuejs.org/" target="_blank">

                     vue-router

                 </a>

             </li>

             <li>

                 <a href="http://vuex.vuejs.org/" target="_blank">

                     vuex

                 </a>

             </li>

             <li>

                 <a href="http://vue-loader.vuejs.org/" target="_blank">

                     vue-loader

                 </a>

             </li>

             <li>

                 <a href="https://github.com/vuejs/awesome-vue" target="_blank">

                     awesome-vue

                 </a>

             </li>

         </ul>

     </div>

 </template>

 <script>

     export default {

         name: 'HelloWorld',

         data() {

             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>

最终显示的页面：

vue2.0的初始化的更多相关文章

  1. vue2.0从头开发项目管理系统

    1.自己的github建一个项目. 2.本地vue2.0项目初始化. 安装node.js,检查node版(node -v). 安装webpack(npm install webpack -g),检查w ...

  2. vue2.0动态绑定图片src属性值初始化时报错

    在vue2.0中,经常会使用类似这样的语法 v-bind:src = " imgUrl "(缩写 :src = " imgUrl "),看一个案例 <te ...

  3. vue2.0实践的一些细节

    最近用vue2.0做了个活动.做完了回头发现,好像并没有太多的技术难点,而自己好像又做了比较久...只能说效率有待提升啊...简单总结了一些比较细节的点. 1.对于一些已知肯定会有数据的模块,先用一个 ...

  4. Vuex2.0+Vue2.0构建备忘录应用实践

    一.介绍Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,适合于构建中大型单页应用. ...

  5. 基于Vue2.0+Vue-router构建一个简单的单页应用

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6185492.html 一.介绍 vue.js 是 目前 最火的前端框架,vue.js ...

  6. 项目vue2.0仿外卖APP（六）

    goods 商品列表页开发 布局编写 除了商品之外还有购物车,还有个详情页,挺复杂的. 两栏布局:左侧固定宽度,右侧自适应,还是用flex. 因为内容可能会超过手机高度,超过就隐藏.左右两侧的内容是可 ...

  7. 项目vue2.0仿外卖APP（五）

    header组件 vue-resourse应用 https://github.com/pagekit/vue-resource vue-resource是Vue.js的一款插件,它可以通过XMLHtt ...

  8. vue2.0 开发实践总结之入门篇

    vue2.0 据说也出了很久了,博主终于操了一次实刀. 整体项目采用  vue +  vue-router +  vuex (传说中的vue 全家桶 ),构建工具使用尤大大推出的vue-cli 后续文 ...

  9. vue2.0入门

    vue2.0 开发实践总结之入门篇   vue2.0 据说也出了很久了,博主终于操了一次实刀. 整体项目采用  vue +  vue-router +  vuex (传说中的vue 全家桶 ),构建工 ...

随机推荐

  1. getOrCreateEnvironment()方法源码探究

    该方法目的是创建一个环境对象,并且根据环境类型,自动判断是创建web环境对象,还是标准非web环境对象. 首先该方法源于prepareEnvironment准备环境: 然后进入该方法源码: 可以发现: ...

  2. version `GLIBC_2.17' not found 解决方法

    1.先查看是哪个函数用的是GLIBC_2.17 root@emb-pc:/home/emb/temp# nm lib61850.so | grep GLIBC_2.17 U clock_gettime ...

  3. struct2depth 记录

    把效果图放在前面 03.28 handle_motion  False architecture    simple joint_encoder  False depth_normalization  ...

  4. realm清空所有数据库的数据

    /* *清空数据库 */ public int clearDatabase() { Realm realm = Realm.getDefaultInstance(); try { realm.begi ...

  5. Python爬虫简单介绍

    相关环境: Python3 requests库 BeautifulSoup库 一．requests库简单使用 简单获取一个网页的源代码: import requests sessions = requ ...

  6. 【学习】python文件读写，用with open as的好处，非常好【转载】

    原文链接:http://www.cnblogs.com/ymjyqsx/p/6554817.html 备注:博主还有很多值得学习的笔记,遇到问题可以拜读,非常感谢博主的总结 读写文件是最常见的IO操作 ...

  7. JAVA学习记录（二）————JAVA中的IO

    Java中I/O操作主要是指使用Java进行输入,输出操作. Java所有的I/O机制都是基于数据流进行输入输出,这些数据流表示了字符或者字节数据的流动序列. 数据流是一串连续不断的数据的集合,就象水 ...

  8. Echarts修改提示框及自定义提示框内容

    1:首先先定义自定义的json数据 var msg = [{ 'tell':'110', 'ContentMessage':"我今天去吃大餐" },{ 'tell':'111', ...

  9. win10关不了机解决办法以及win10怎么禁止开机启动项

    1.win10关不了机解决办法:https://zhidao.baidu.com/question/693962749213927924.html 2.win10怎么禁止开机启动项:https://j ...

  10. mezzanine的breadcrumb

    page_menu tag为什么能渲染出当前页的面包屑路径??靠的是request的page对象,要是page的自己或是它的的祖先才渲染,是根据page的属性page.is_current_or_as ...