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. http中的filter拦截servlet之后获取body，字符流关闭，无法继续传入控制器

    https://blog.csdn.net/pyxly1314/article/details/51802652

  2. Last Work-随机出题加法游戏

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. Windows下虚拟机安装Mac OS X —– VMware Workstation12安装Mac OS X 10.11

    1下载  镜像:Instal OS X Yosemite 10.10.3(14D131).cdr        密码:qhhm 2 unlocker208文件(链接:https://pan.baidu ...

  4. vue分页效果

    js部分 <script src="....js/vue.js"></script> <script src="..../js/vue-re ...

  5. rabbitmq支持.net framwork 3.5的最后版本

    方便后来人!!!经过一系列的确认!! rabbitmq支持.net framwork 3.5的最后版本是3.4.3, 安装步骤: 1.工具->Nuget程序包管理器,进入控制台 2.Instal ...

  6. echarts统计图Y轴（或X轴）文字过长问题解决

    echarts 统计图Y轴文字过长 在使用echarts时,出现数值非常大,Y轴又显示不下的情况就需要压缩Y轴数值刻度. 解决方法: yAxis: { type: 'value', axisLabel ...

  7. 用JavaScript制作页面特效

    1.Window对象 名称 history:有关客户访问过的URL的信息 location:有关当前URL的信息 screen:有关客户端的屏幕和显示性能的信息 常用方法 prompt():弹出输入框 ...

  8. Exp4 恶意代码分析 20164313 杜桂鑫

    1.实践目标 1.1是监控你自己系统的运行状态,看有没有可疑的程序在运行. 1.2是分析一个恶意软件,就分析Exp2或Exp3中生成后门软件:分析工具尽量使用原生指令或sysinternals,sys ...

  9. 【转】配置Exchange 2010 服务器(二)Exchange2010证书配置

    原文链接:http://blog.51cto.com/shubao/788562 (一)架设证书服务器 (二)Exchange2010申请证书 (三)证书服务器导入Exchange服务器受信任根证书 ...

  10. LeetCode 141. Linked List Cycle 判断链表是否有环 C++/Java

    Given a linked list, determine if it has a cycle in it. To represent a cycle in the given linked lis ...