Vue的学习--怎么在vue-cli中写网页
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中写网页的更多相关文章
- vue初级学习--控制台创建vue项目
一.导语 困困的我,好想睡啊,但还是敲下这边有的没的的笔记吧 二.正文 1.输入 vue list 可查看此环境下,vue能创建的项目模板 没将webpack.vue-route啃精了的话,老实用we ...
- Js 框架之Vue .JS学习记录 ① 与Vue 初识
目录 与 Vue.js 认识 VUE.JS是个啥?有啥好处? Vue 的目标 战前准备 VUE.JS环境 VUE.JS 尝试一下,你就明白 第一步 实例化VUE 对象 第二步VueAPP 调用数据 ...
- Vue的学习总结之---Vue项目 前后端分离模式解决开发环境的跨域问题
原文:https://blog.csdn.net/localhost_1314/article/details/83623526 在前后端分离的web开发中,我们与后台联调时,会遇到跨域的问题. 比如 ...
- vue入门学习（基础篇）
vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...
- 在进行vue的学习，项目中需要引入bootstrap、jquery的步骤。
在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...
- Vue.js学习笔记：在元素 和 template 中使用 v-if 指令
f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...
- vue cli 中关于vue.config.js中chainWebpack的配置
Vue CLI 的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置 ...
- vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)
第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法) #课程目标 了解 vue 框架的特点 掌握创建 vue 实例 掌握 data ...
- Blazor和Vue对比学习（基础1.8）：Blazor中实现计算属性和数据监听
1.7章<传递UI片断>,需要做几个案例,这部分暂停消化几天.我们先把基础部分相对简单的最后两章学习了. 计算属性和数据监听是Vue当中的概念,本质上都是监听数据的变化,然后做出响应.两者 ...
随机推荐
- error:assign attribute must be unsafeunretained
今天在使用协议的过程中.偶然发现这样使用 ? 1 2 3 4 5 6 7 8 9 10 @interface AppDelegate (){ id<chatdelegate> t ...
- 算法导论————KMP
[例题传送门:caioj1177] KMP模版:子串是否出现 [题意]有两个字符串SA和SB,SA是母串,SB是子串,问子串SB是否在母串SA中出现过.如果出现过输出第一次出现的起始位置和结束位置,否 ...
- 21.MFC进制转换工具
相关代码:链接:https://pan.baidu.com/s/1pKVVUZL 密码:e3vf #include <stdlib.h> #include <stdio.h> ...
- JavaScript 与Document
JavaScript JavaScript 是脚本语言, 需要有宿主文件, 他的宿主文件是HTML文件. 可以写在head中 body中 和</heml>之后 一般写在< ...
- C++实现矩阵求逆
最近实现一个算法要用到求逆等矩阵运算,在网上搜到一个别人写的矩阵类,试了一下效果不错,贴在这里,做个保存. matrix.h文件: #ifndef __MATRIX_H__ #define __MAT ...
- Codefroces432 div2 A,B,C
A. Arpa and a research in Mexican wave Arpa is researching the Mexican wave. There are n spectators ...
- FreeBSD是UNIX系统的重要分支，其命令与Linux大部分通用，少部分是其特有。
FreeBSD是UNIX系统的重要分支,其命令与Linux大部分通用,少部分是其特有. 1: man 在线查询 man ls2: ls 查看目录与档案 ls -la3: ln 建立链接文件 ln -f ...
- BZOJ2668: [cqoi2012]交换棋子(费用流)
Description 有一个n行m列的黑白棋盘,你每次可以交换两个相邻格子(相邻是指有公共边或公共顶点)中的棋子,最终达到目标状态.要求第i行第j列的格子只能参与mi,j次交换. Input 第一行 ...
- python数据处理技巧一
字符串赋值(传参)技巧 Python中一般的字符串赋值的方式如下: variable = "Test" print "I just [%s] unit"%var ...
- Git 远程仓库默认权限问题的解决
多人共同开发维护一个项目时,对整个项目文件互有拉取.推送等行为.为防止操作时文件权限出现冲突,可有以下2种方法解决: 1. 本地git的远端设置中,连接远程仓库时多人使用同一个用户名,该用户名为git ...