VueJS基础框架代码介绍

最新推荐文章于 2024-07-12 08:43:23 发布

weixin_30482181

最新推荐文章于 2024-07-12 08:43:23 发布

阅读量243

点赞数

文章标签： webpack javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/hailongchen/p/7451857.html

版权

参考文档
https://vuejs.bootcss.com/v2/api/
https://router.vuejs.org/zh-cn/essentials/getting-started.html
http://vuejs-templates.github.io/webpack/structure.html

index.html文件

index.html模板。其会调用main.js文件，用于绑定vue实例，最终渲染页面。

This is the template index.html for our single page application. During development and builds, Webpack will generate assets, and the URLs for those generated assets will be automatically injected into this template to render the final HTML.

通过上述引用内容，可知这个文件其实是webpack需要用的东东。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>my-project</title>
  </head>
  <body>
    <div id="app"></div>    // 渲染id=app的内容（需要全局唯一）。做几个小测试比如注释掉这句，就会出现“ Cannot find element: #app”
    <!-- built files will be auto injected -->
  </body>
</html>

src/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'     // ./App省略了文件格式后缀.vue。   import的这句是ES6的语法，用于加载模块。等价于  var App = require('./App.vue')
import router from './router'
import vueResource from 'vue-resource'   // vue-resource 插件
import 'bootstrap/dist/css/bootstrap.min.css'   // 引入bootstrap
import 'bootstrap/dist/js/bootstrap.min.js'

Vue.use(vueResource)


Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',      // 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。 即定义实例的作用域
  router,    //   应该是路由注入，而且此处是全局的注入（此处没找到明确的参考）。其会寻找所有components文件夹下注册的路由对象。如基础框架的src/router/index.js中的routes[]
  template: '<App/>',     // 引用名为“App”的模板。*一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。*
  components: { App }     // 注册组件，使之在该实例上可用
})