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. [蓝桥杯]PREV-23.历届试题_数字游戏

    问题描述 栋栋正在和同学们玩一个数字游戏. 游戏的规则是这样的:栋栋和同学们一共n个人围坐在一圈.栋栋首先说出数字1.接下来,坐在栋栋左手边的同学要说下一个数字2.再下面的一个同学要从上一个同学说的数 ...

  2. android 显示大图模糊问题

    使用Glide 版本为4.8.0 /* */ Glide.with(context).asBitmap().load(url).into(new SimpleTarget<Bitmap>( ...

  3. Java核心-多线程-并发控制器-CountDownLatch倒数闩

    1.基本概念 CountDownLatch,中文名倒数闩,jdk并发工具包中一个并发控制器,它抽象了一个常见的多线程并发场景,开发人员使用它可以写出同时兼顾线程安全性与高效率的代码. 2.抽象模型 相 ...

  4. Java中的io流学习（了解四大基类和基本步骤）

    Java中io流四大基类及io流操作四大基本步骤 io流:(input/output)即输入输出流.面向对象的思想之一是面向接口编程,面向父类编程,也就是多态.所以学好基类(父类)很重要. 分类 按处 ...

  5. [UE4]Event Tick

    一.每一帧都会触发Event Tick事件,“Delta Seconds”参数表示当前帧说花费的时间 二.因为各种原因(比如卡帧等),每一帧所花费的时间并不是相同的

  6. 关于anaconda中jupyter notebook错误

    anaconda这个软件是真的坑,其中的jupyter notebook每次都会出错,不知道,为什么,可惜我的pycharm装tensorflow一直有错误,不然,真想卸了这个软件. 会莫名其妙闪退, ...

  7. 无外接键盘安装 raspberry pi 3B+ 安装系统

    从官网介绍看,当前raspbian和以前大家的记录略有不同,老的博客资料基本都是介绍下载raspbian,但现在raspbian已经不再维护镜像, raspbian系统开始由官方 pi foundat ...

  8. WordPress版微信小程序安装使用说明

    昨天在群里,有刚刚使用WordPress版微信小程序朋友,在问安装过程中的问题,这些问题是经常被问到,这至少说明两个问题: 1.我开发的程序安装和使用不够简易,无法通过简单的配置就可以使用,特别是如果 ...

  9. 常见26种NLP任务的练手项目

    经常有人问我:老大让我完成xxx,我不会,他也不会,但是很着急.这个任务怎么实现啊?这个任务需要什么技术啊?这种情况我遇到有100+次了,而且很多时候问得问题跟具体需要的技术简直是驴唇不对马嘴.所以今 ...

  10. NOIAC41 最短路(线性基）

    /* 暴力可以st表维护线性基, 从而复杂度两个log 实际上我们可以离线来做, 并且记录可行最右值, 就是一个log的了 */ #include<cstdio> #include< ...