vue.min.js和vue-cli的区别和联系我现在还是没有太清楚，大概是还没搞清楚export default和new Vue的区别，先浅浅记录一下怎么“用vue-cli来写网页”。

　　“vue-cli是一个可以快速搭建大型单页应用的官方命令行工具。 ”在讨论这个问题前，先把项目的目录放出来（环境的配置和项目的创建在上一篇）：

　　

            • build 操作文件，通过npm run * 可执行其中的文件
            • config 配置文件
            • src 资源文件，所有的图片、组件都在这个文件夹内

　　开发阶段我们关注config的index.js和src文件夹，index.js文件包含了简单的环境配置，先来看看src和index.html，当我们在项目根目录使用npm run dev将初始的helloworld跑起来，然后访问127.0.0.1:8080，界面如下：

1、index.html+src

　　所谓的单页应用，大概因为整个vue项目中只存在一个html文件吧，所谓页面跳转，做的只是页内的界面的更新。对于整个项目，index.html是我们所见的内容，src\App.vue做的是所有页面共有的部分，真正编辑页面的是src\components中的vue文件，定义路由跳转（将components嵌入App.vue）在src\router，图片等资源文件放在src\assets，与后端交接数据通过的是vue界面中接口访问获取数据，如axios。

　　具体的如下所示

　　<1>index.html中我们只可以看到一个'#app'的div，作为项目网页的主体，我们可以在index.html中引入全局的js文件

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <title>vue-test</title>

    <script src="../static/lib/jquery-3.3.1.min.js"></script><!--可以在这里引入全局的js文件-->

  </head>

  <body>

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

    <!-- built files will be auto injected -->

  </body>

</html>

　　<2>src\mian.js可以看到为index.html中'#app'绑定App.vue的操作

// 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,

  components: { App },

  template: '<App/>'

})

　　<3>App.vue中可以编写所有网页公共的部分，如导航栏、页头页尾等等。其中的<router-view/>则是引入的子组件的位置，具体的联系之后再说。

<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>

　　<4>components中放的是子组件.vue文件，如示例文件helloworld.vue，<temple></temple>元素中以单独一个div开始定义页面，在export default中绑定数据和页面。

　　<5>那么子组件是如何和App.vue联系起来的呢?通过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

    }

  ]

})

参考：

https://www.jianshu.com/p/09fcc8173a49

https://blog.csdn.net/wulala_hei/article/details/80488674

Vue的学习--怎么在vue-cli中写网页的更多相关文章

  1. vue初级学习--控制台创建vue项目

    一.导语 困困的我,好想睡啊,但还是敲下这边有的没的的笔记吧 二.正文 1.输入 vue list 可查看此环境下,vue能创建的项目模板 没将webpack.vue-route啃精了的话,老实用we ...

  2. Js 框架之Vue .JS学习记录 ① 与Vue 初识

    目录 与 Vue.js 认识 VUE.JS是个啥?有啥好处? Vue 的目标 战前准备  VUE.JS环境 VUE.JS 尝试一下,你就明白 第一步 实例化VUE 对象 第二步VueAPP 调用数据 ...

  3. Vue的学习总结之---Vue项目 前后端分离模式解决开发环境的跨域问题

    原文:https://blog.csdn.net/localhost_1314/article/details/83623526 在前后端分离的web开发中,我们与后台联调时,会遇到跨域的问题. 比如 ...

  4. vue入门学习（基础篇）

    vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...

  5. 在进行vue的学习，项目中需要引入bootstrap、jquery的步骤。

    在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...

  6. Vue.js学习笔记：在元素 和 template 中使用 v-if 指令

    f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

  7. vue cli 中关于vue.config.js中chainWebpack的配置

    Vue CLI  的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置 ...

  8. vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)

    第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法) #课程目标 了解 vue 框架的特点 掌握创建 vue 实例 掌握 data ...

  9. Blazor和Vue对比学习（基础1.8）：Blazor中实现计算属性和数据监听

    1.7章<传递UI片断>,需要做几个案例,这部分暂停消化几天.我们先把基础部分相对简单的最后两章学习了. 计算属性和数据监听是Vue当中的概念,本质上都是监听数据的变化,然后做出响应.两者 ...

随机推荐

  1. Swift：UIKit中Demo(一)

    关于Swift的基本概念及语法知识.我在前面的章节中已经介绍了非常多.这一节和下一节主要有针对性的解说Swift在实际UIKit开发中的使用场景及注意点.先来看看Demo的终于效果图. Demo分析: ...

  2. linux设备驱动归纳总结（三）：4.ioctl的实现

    linux设备驱动归纳总结(三):4.ioctl的实现 一.ioctl的简单介绍: 尽管在文件操作结构体"struct file_operations"中有非常多相应的设备操作函数 ...

  3. 【Linux】JDK+Eclipse 搭建C/C++开发环境

    注:本文所提供的参考示例是在CentOS Linux环境下的安装,不保证适用于其他版本的Linux系统. ·    安装前的注意事项 编译源代码是需要对应的代码编译工具的,本文中安装的Eclipse只 ...

  4. 圈复杂度(Cyclomatic Complexity)

    圈复杂度(Cyclomatic Complexity)是很常用的一种度量软件代码复杂程度的标准.这里所指的“代码复杂程度”并非软件内在业务逻辑的复杂程度,而是指代码的实现方式的 复杂程度.说起来有点绕 ...

  5. HTTP 各种特性应用（二）

    一.Cookie 通过 Set-Cookie 设置. 下次浏览器请求就会带上. 键值对,可以设置多个. Cookie 属性 max-age 和 expires 设置过期时间 Secure 只在 htt ...

  6. DedeCMS列表页隔行/多行随意换色

    在很多列表调用的时候都需要有隔行换色或者多行不同颜色,特别在全通式的首页轮展图的时候,要想实现轮展图背景随着图片的更换,超过三张或多张的时候,隔行换色已经不能解决问题了,在原来的隔行换色的基础上,进行 ...

  7. DEDE 修改后台图集上传单个图片的大小限制

    默认情况下,DEDE图集中单个图片大小限制在2M以内,而有时我们需要上传一个2M以上的文件,这是只要修改几个文件就可以实现了. 一.需要修改php.ini这个文件,我们必须保证PHP的配置中允许上传一 ...

  8. BZOJ3645: Maze(FFT多项式快速幂)

    Description 众维拉先后在中土大陆上创造了精灵.人类以及矮人,其中矮人是生性喜好常年居住在地下的洞穴的存在,他们挖掘矿物甚至宝石,甚至用他们的勤劳勇敢智慧在地底下创造出了辉煌宏大的宫殿,错综 ...

  9. python3 类、对象的基础概念

    类:具有相同特性和方法的抽象概念称为类 对象:从类中具体描述的一个事物称为对象 类和对象的关系:类是对象的抽象概念,对象是类的具体实例 class test001: #创建类 def __init__ ...

  10. GPU和CPU的区别

    http://blog.csdn.net/conowen/article/details/7256260 这里有几种计算平台的Flynn分类法 GPU是SIMD 多核CPU是MIMD 硬件结果多核处理 ...