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. [ZZ]AppiumForWindows 菜鸟计划合集

    AppiumForWindows 菜鸟计划 (一) Appium 材料包 AppiumForWindows 菜鸟计划 (二) 源码环境搭建及代码结构 AppiumForWindows 菜鸟计划 (三) ...

  2. rocketmq （一）运行原理以及使用问题

    使用消息中间件可以解决高并发,那是因为消息中间件可以将消息缓存到队列之中. 但是 当消息 过多的时候,几万,几十万...消息中间件也可能会宕机,所以我们可以对消息中间件进行集群,在之前的activem ...

  3. 工作中拓展的加密解密传输方式. DES对称加密传输.

    系统间通过xml传输, 不能采用明文, 就加密传输. 秘钥(真正有效的是前8位)存储于配置中. public static string EncryptStr(this string content, ...

  4. 通过setup.py安装项目dependencies

    一.使用方法 安装命令   $ pip install  -e  <option> setup.py 二.具体介绍 pip intall -e 举例一个setup.py $ pip int ...

  5. CSS3之实现光润效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. sql 实现学生成绩并列排名算法

    SELECT uname, score , 排名=(SELECT COUNT(score) FROM FenShu WHERE Score > a.Score) + 1FROM FenShu a ...

  7. Java——对象的复制、克隆、序列化

    原创作者: https://blog.csdn.net/lmb55/article/details/78277878对象克隆(复制)假如说你想复制一个简单变量.很简单: int apples = 5; ...

  8. tensorflow/threading 用到的一些函数

    ---恢复内容开始--- import tensorflow as tf 1    tf.squeeze([1,2,3,4])  删除所有为1的维度   eg shape从(1,2,3,1)到(2,3 ...

  9. https://www.oschina.net/project/lang/19/java

    https://www.oschina.net/project/lang/19/java

  10. matlab-单位圆内射线数次反射

    转载自 https://zhidao.baidu.com/question/2268408219692883828.html 先贴代码和放图,然后我再做出一点解释(其实只是觉得这个思路好厉害,所以想保 ...