vue-cli的基础构造
1,项目目录

2, bulid 下文件及目录

3,config下文件及目录

接下来说说vue-cli项目中页面相关的主要文件^o^
首先是index.html:
说明:一般只定义一个空的根节点,在main.js里面定义的实例将挂载在#app节点下,内容通过vue组件填充。

App.vue文件:
说明:app.vue是项目的主组件,所有页面都是在app.vue下切换的。一个标准的vue文件,分为三部分。
第一装写html代码在<template></template>中,一般在此下面只能定义一个根节点;
第二<script></script>标签;
第三<style scoped></style>用来写样式,其中scoped表示。该style作用于只在当前组件的节点及其子节点,但是不包含子组件呦。
<router-view></router-view>是子路由视图,后面的路由页面都显示在此处,相当于一个指示标,指引显示哪个页面。

main.js:
说明:入口文件来着,主要作用是初始化vue实例并使用需要的插件。比如下面引用了4个插件,但只用了app(components里面是引用的插件)。

router下面的index.js文件:路由配置文件。
说明:定义了三个路由,分别是路径为/,路径为/msg,路径为/detail。后续会详细说明,因为我也是才学好多东西不懂,囧。

vue-cli的基础构造的更多相关文章
- [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍
一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...
- vue cli 3
介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...
- [WIP]Vue CLI
更新: 2019/05/30 文档: https://cli.vuejs.org/zh/ 安装 npm install -g @vue/cli 确认是否成功安装 vue --version 基础 ...
- Vue CLI 3.x 简单体验
文档 中文文档 补充于02月10日 vue脚手架的3.x版本已经在开发中,现在还处于alpha版本.我们来看看有哪些变化. 使用 npm install -g @vue/cli 命名方式已经改为npm ...
- Vue技术点整理-Vue CLI
Vue CLI 是一个基于 Vue.js 进行项目快速开发的脚手架 注:具体安装步骤可参考Vue CLI,默认安装的脚手架,是没有service.util等工具类的,以下主要描述如何在脚手架的基础上进 ...
- Vue.js应用基础
声明 这篇博文是我的Vue学习记录,其中参杂了不少我个人的理解,由于我并没有继续学习Vue的源码,所以不能保证这些理解都是正确的.如果这篇博文有幸被你读到,请带着批判的心情去审视它. 如果你发现了其中 ...
- vue/cli新旧版本安装方式
一.老版本安装 Shift+鼠标右键 选择打开命令窗口 1.创建项目之前,需先确保本机已经安装node 在命令窗口中执行node -v npm -v 2.一般情况下用npm安装东西比较慢,可以使用淘 ...
- Vue CLI 介绍安装
https://cli.vuejs.org/zh/guide/ 介绍 警告 这份文档是对应 @vue/cli 3.x 版本的.老版本的 vue-cli 文档请移步这里. Vue CLI 是一个基于 V ...
- 【Vue CLI】从安装到构建项目再到目录结构的说明
目录 1. 构建我们的项目 2. 目录结构说明 2.1 build目录 2.2 config目录 2.3 src目录 2.4 static目录 "Vue CLI是一个基于Vue.js进行快速 ...
- @vue/cli 4.0.5 学习记录
1. Vue CLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的 vue 命令.Vue CLI 插件的名字以 @vue/cli-plugin- (内建插件) 或 vue-cli ...
随机推荐
- 与高精死杠的几天——记两道简单的高精dp
(同样也是noip往年的题 1.矩阵取数游戏 题目链接[Luogu P1005 矩阵取数游戏] \(\mathcal{SOLUTION}:\) 通过对题目条件的分析,我们可以发现,每一行取数对答案的 ...
- jQuery可拖拽旋转的3D图片墙
在线演示 本地下载
- WPF文本输入框关闭Win10输入法设置
今天一个同事突然站起来给了我一个眼神,我就知道没啥好事.果然给我指出了一些bug,其中一个是这样的,密码输入框只能输入一个字符,再输入就输入不了. 这种降档次的错误咱也能出,果断夺过键盘,疯狂输入一番 ...
- Git提交代码的小知识
1.需要切换到项目目录下并创建一个Repository用于提交代码到这个仓库里 cd /g/....//cd后面有空格,用于进入某个项目文件夹 git init//用于创建Repository 2.添 ...
- linux创建定时任务发送钉钉通知
一.现在钉钉里面添加机器人 添加成功后,复制出Webhook链接. 注意,自定义关键字时你的发送信息中一定要完整包含关键字 二.找到自己的服务器 1. sudo su 切换到root用户 2.cron ...
- Mysql检查列是否存在并新增、修改、删除列
在MYSQL中,新增.修改.删除列时不能进行IF EXISTS判断,IF语句只能出现在存储过程当中,故博主用存储过程的方法新增.修改.删除列,修改列名称. DROP PROCEDURE IF EXIS ...
- Linux fing cd 查找文件/文件夹并进入目录命令
查找文件|文件夹并进入目录命令:cd $() [root@localhost /]# cd $(dirname "`find / -name 'ifcfg-ens33'`") // ...
- 6.redis
1.Redis的安装以及客户端连接 安装:apt-get install redis-server 卸载:apt-get purge --auto-remove redis-server 启动:red ...
- zabbix分布式部署和主机自动发现
1.分布式部署原理 1.1Zabbix分布式部署的原理 传统的部署架构,是server直接监控所有的主机,全部主机的数据都是有server自己来采集和处理,server端的压力比较大,当监控主机数量很 ...
- 安装vim自动补全插件
1 安装VIM 2 安装vim插件管理工具.过程见链接.(谢谢) 3 在.vimrc中添加下列代码 Bundle 'Valloric/YouCompleteMe' 保存退出后打开vim,在正常模式下输 ...