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. windows 10下安装linux系统

    理员权限打开powershell,输入 Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-L ...

  2. @EnableEurekaServer无法正常import原因是spring-cloud-dependencies版本太低

    去maven repository 库里 http://mvnrepository.com/artifact/org.springframework.cloud/spring-cloud-depend ...

  3. 廖雪峰Java9正则表达式-1正则表达式入门-2正则表达式匹配规则

    正则表达式的匹配规则: 从左到右按规则匹配 匹配规则及示例 可以匹配 不能匹配 "abc" "abc" 不能匹配:"ab", "A ...

  4. jupyter依赖tornado版本

    使用jupyter莫名奇妙出现500错误,发现是更新tornado出了问题,我的jupyter版本是5.7.4不支持6.x版本的tornado,回退到5.x版本的tornado就好了. pip ins ...

  5. Centos7下GlusterFS 分布式文件系统环境搭建

    Centos7下 GlusterFS 环境搭建准备工作glusterfs-3.6.9.tar.gzuserspace-rcu-master.zip三台服务器:192.168.133.53.192.16 ...

  6. day1--一个简单的登录接口

    _usrename = "Yvan"_password = "abc123"count=0while count <3:    username = in ...

  7. Java经典代码片段——使用NIO进行快速的文件拷贝

    public static void fileCopy(File in, File out) throws IOException { FileChannel inChannel = new File ...

  8. jmeter接口测试-线程组设置(断言失败后用例停止执行)

    问题描述: jmeter跑接口用例的时候,其中一条用例的对断言失败后,后面的用例都不执行了! 解决思路1: 考虑应该有地方设置,在菜单栏找了半天没找到,百度也没有查到 解决思路2: jmeter源码导 ...

  9. java程序中的乱码方案

    1. 万能方式,既能够解决POST请求乱码,又能够解决GET请求乱码 操作方法:先将服务器中接收到的数据采用ISO-8859-1的方式解码,回归原始状态, 再给定一种支持简体中文的编码方式重新编码组装 ...

  10. hive函数--编码解码

    以UTF-8为例: 测试字符串:☕️午后咖啡☕️ 一.编码 hive"); 输出: %E2%98%95%EF%B8%8F%E5%8D%88%E5%90%8E%E5%92%96%E5%95%A ...