• 上一篇: 【Vue】使用vue封装插件并发布到... 下一篇:SAP Fiori + Vue = ？

vue inIT webpack my-PRoject

npm install

npm install --registry=https://registry.npm.taobao.org

npm run dev

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

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    .....
  </div>  
</template>  

<script>  
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

我们会发现这几排字就是显示在页面的几排文字~
App.vue部分：

<template>
  <div id="app">
    <img src="./assets/LOGo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

这其中的<img src="./assets/logo.png">是显示在主页上面的图片，所以它也与主页的输出有关系。
我们还可以猜想，下面的router-view就输出了HelloWorld里面写的内容。但是我们没有看到直接的引用。我们就去查询一下这个router-view（https://router.vuejs.org/zh-c...），还可以想到下面main.js中引用的router，所以我们看看router下的router.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: 'Hello',
      component: HelloWorld
    }
  ]
})

作为小白还不是很清楚其中的原理，但是我们可以肯定，就是在这里引用了HelloWorld这个组件。
main.js：

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,
  template: '<App/>',
  components: { App }
})

这个文件引入了App.vue，还有上述的router.js。并在下面用到了App的组件。
所以可以得出一个简单的结论：以main.js为中心，main.js引进了App.vue，App.vue借助使用到了HelloWorld。
在main.js中这个组件对准了id是app的元素，使用APP组件去替换。
其中有一句template: '<App/>'，官方对template（https://cn.vuejs.org/v2/api/#...）的解释是：

一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。
结合查询其他说法，就是说它会把id是app的元素以<App/>形式替换。

修改和比较

router-view替换
在App.vue中，不用<router-view>写出一样的效果

<template>
  <div class="app">
    <img src="./assets/logo.png">
    <hello></hello>
  </div>
</template>

<script>
import Hello from './components/HelloWorld'

export default {
  name: 'app',
  components: {
    Hello
  }
}
</script>

直接在这里引入HelloWorld也可以显示文字内容。
相应在main.js可以把router相关的内容删除，不过router肯定有更加多的功能0-0。

关于templateの简单测试
我们在index.html文档里添加一个div

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

在App.vue中修改一下模板的内容：

<template>
  <div class="app">
    <img src="./assets/logo.png">
    <hello></hello>
  </div>
</template>

然后在main.js再加一个渲染

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

new Vue({
  el: '#app1',
  template: '<App/>',
  components: { App }
})

渲染出来的结果就是：

两个class是app的div。也就很好说明了它的替换~
还可以思考，我们在其他的.vue文件中，直接在template标签中写组件的名字作为标签就可以引用到组件，但是在main.js中，我们要用template:'<App/>'去替换，缺少这句就会失败，也可以猜想因为我们也不能在js里面直接写上结构代码。

Vueの初体验细节

关于ESLint
刚开始随便修改了几个代码，结果git上频繁的报错，一看错误内容竟然是说空格多了，没有空行之类的格式问题，后来才发现，原来是开启了一个格式检测的依赖。

Use ESLint to lint your code?(Y/n)

因为我是初学怕出错，所以当然都默认写了yesQAQ，度娘一下就知道：

ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具,使用它可以避免低级错误和统一代码的风格

所以不需要的话，要记得输入n。

脚本宝典总结

以上是脚本宝典为你收集整理的【呆萌の体验】vue.js初次体验全部内容，希望文章能够帮你解决【呆萌の体验】vue.js初次体验所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。