如何使用vue-cli搭建好的项目
本人是一枚前端小白,也是从零开始学习vue.js。由于闲着蛋疼,写一点自己的经验,可能有点low。是新手想上道的话,可以看看,如果有大神,也可以给我指导一下,小生感激不尽。
关于如何使用vue-cli搭建vue项目,我这里就不再赘述,直接转发个博客,你们自己看就行了。
https://www.cnblogs.com/wisew...
首先,我建议脚手架搭建的时候,最好使用eslint格式校验,这样代码的书写更具规范性(虽然有点烦)。当项目搭建好的时候,你会发现,整个目录中就一个html文件--index.html,这就是整个项目dom载体,这个文件中只有一个 <div id="app"></div> ,这个div就是dom载体上的一个钩子,让其他.vue文件可以挂载。打开src文件夹,里面的main.js就是入口文件,整个项目如果需要进行影响全局的操作的话,就在main.js里进行就行了,几乎涉及不到index.html。下图中划红线的部分,就是新建一个vue实例,然后挂载到#app上,而这个vue实例中使用的组件就是<App/>.
在看看App.vue文件,里面只有一个<router-view/>,这是把全局的路由视图都收在这里。这就说明App.vue是全局性的文件。一般比如网站的topBar组件可以放在这里。
然后看src文件目录,
有个router文件夹,这是存放路由文件的地方,打开这个文件夹,里面有个index.js,我自己又添加了几个文件,这样容易看出路由结构来;
我们可以看到,有个routes,不错他就是一个数组,它里面有三个json对象,每个对象代表一个页面路由,这三个路由是同级的。每个json中的三个属性字段,分别是路径,组件名称已经所需要的组件。然后你需要的写的东西,就是在这几个组件对应的文件中写相应的代码就行了。而components文件夹就是存放组件对应vue文件的。
其实你完全可以在src里面另外建文件夹,只要路径引入的正确就行了。再有就是config文件夹,里面有个index.js,这里面有一些参数可以修改,比如port,就是跑项目是,项目展现的浏览器端口。autoOpenBrowser就是在跑项目的时候是否自动打开浏览器,如果是true,就不用手动打开浏览器,输入localhost:8080了,其他的一些配置项就自己研究吧,一般情况下用不到。
由于是第一次写博客,么有经验。只是简单介绍一下,以后会慢慢长进的。有问题和要指点的,请留言。
如何使用vue-cli搭建好的项目的更多相关文章
- vue cli搭建项目及文件引入
cli搭建方法:需安装nodejs先 1.npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm,用cnpm下载 ...
- 使用@vue/cli搭建vue项目开发环境
当前系统版本 mac OS 10.14.2 1.安装node.js开发环境 前端开发框架和环境都是需要 Node.js vue的运行是要依赖于node的npm的管理工具来实现 <mac OS ...
- vue cli 3.0创建项目
.npm i -g @vue/cli .vue create my-project 此处有两个选择: 1.default (babel, eslint)默认套餐,提供babel和eslint支持 2. ...
- Vue Cli 3:创建项目
一 简介 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,有几个独立的部分. 1 CLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的 vue 命令.(vue ...
- 利用脚手架vue cli搭建vue项目
vue.js https://vuejs.org/ 基础: http://cn.vuejs.org/v2/guide/installation.html 1.安装需要利用npm包管理器,所以首先安装n ...
- vue cli搭建项目
1.首先电脑要在安装node环境下才能运行 2.全局安装webpack:npm install webpack -g 3.安装vue脚手架: npm install vue-cli -g 4.新建文件 ...
- vue cli搭建的vue项目 不小心开了eslint 一直报黄色的警告
报错必须处理,警告也忍不了,发现在bulid -webpack.base.config.js 里找到 const createLintingRule = () => ({ /*test: /\. ...
- VUE环境搭建、创建项目、vue调试工具
环境搭建 第一步 安装node.js 打开下载链接: https://nodejs.org/en/download/ 这里下载的是node-v6.9.2-x64.msi; 默认式的安装,默认 ...
- vue脚手架搭建移动端项目--flexible.js
通过命令行 node -v 查看是否安装node环境 在 nodejs 和 webpack已安装的前提下,随便一个文件夹下,输入命令行 npm install vue-cli -g 安装完成后,通过 ...
- vue环境搭建及创建项目
安装node环境:node环境下载地址:https://nodejs.org/zh-cn/download/,可根据对应的操作系统版本下载安装 安装完成后查看对应的node和npm版本,如没有出现对应 ...
随机推荐
- Python回顾笔记(此讲大致说明,详情请看之前的笔记)
内容概要 数据分析(numpy,pandas,matplib) 数据清洗 爬虫 teableau软件 今日内容概要 Python知识回顾 数据分析 ipython模块 anaconda软件 numpy ...
- JZ-037-数字在排序数组中出现的次数
数字在排序数组中出现的次数 题目描述 统计一个数字在升序数组中出现的次数. 题目链接: 数字在排序数组中出现的次数 代码 /** * 标题:数字在排序数组中出现的次数 * 题目描述 * 统计一个数字在 ...
- LeetCode-001-两数之和
两数之和 题目描述:给定一个整数数组 nums 和一个整数目标值 target,请你在该数组中找出 和为目标值 target 的那 两个 整数,并返回它们的数组下标. 你可以假设每种输入只会对应一个答 ...
- Laravel自定义错误提示,自定义异常类提示,自定义错误返回信息,自定义错误页面
方法一 新增CustomException.php文件 App\Exceptions\CustomException.php <?php namespace App\Exceptions; us ...
- 为什么我的MySQL会“抖”一下?
不知道你有没有遇到过这样的场景,一条 SQL 语句,正常执行的时候特别快,但是有时也不知道怎么回事,它就会变得特别慢,并且这样的场景很难复现,它不只随机,而且持续时间还很短. 1)InnoDB 在处理 ...
- U8g2库的使用
一.硬件介绍: 由于笔者这里只有0.96寸的OLED屏幕,那就讲讲最常用的0.96寸OLED屏幕吧. OLED介绍: OLED,即有机发光二极管( Organic Light Emitting Dio ...
- tomcat manager status配置
1. 确保tomcat下原来自带的几个项目未被删掉,tomcat启动时localhost:8080能直接访问tomcat主页 2. 修改tomcat下 conf/tomcat-users-xml文件, ...
- python程序unix密码破解
# qianxiao996精心制作 #博客地址:https://blog.csdn.net/qq_36374896 #!/usr/bin/env python #指定这是一个python文件,使用这个 ...
- w3af漏扫的基本使用
一.安装 apt安装 apt-get update apt-get install -y w3af 出现无法定位软件包 源码安装 sudo apt-get install git sudo apt-g ...
- markdown类型文件编辑大全
正文: 1.标题的几种写法: 第一种: 前面带#号,后面带文字,分别表示h1-h6,上图可以看出,只到h6,而且h1下面会有一条横线,注意,#号后面有空格 第二种: 这种方式好像只能 ...