如何使用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版本,如没有出现对应 ...
随机推荐
- LeetCode-029-两数相除
两数相除 题目描述:给定两个整数,被除数 dividend 和除数 divisor.将两数相除,要求不使用乘法.除法和 mod 运算符. 返回被除数 dividend 除以除数 divisor 得到的 ...
- 国产化之银河麒麟安装达梦数据库DM8
背景 某个项目需要实现基础软件全部国产化,其中操作系统指定银河麒麟,数据库使用DM8. 虽然在之前的文章中已经成功模拟国产飞腾处理器,但是运行效率不高,所以这里的银河麒麟操作系统还是运行在x64平台上 ...
- 0x01 向日葵日志溯源
1.简介 向日葵工具具有linux桌面系统版本,在应急场景中,攻击者通过向日葵远控linux实现入侵是一种常见手法,通过分析向日葵的服务日志,可以分析出安全事件时间发生点前后有无向日葵远控的行为,但由 ...
- Mac下如何自动备份目录到七牛云?
原文链接 七牛云是个很好用的图床,但是 Mac 下并没有什么很好用的客户端,每次上传都需要在网页上手动一个个传文件,十分麻烦,于是仔细看了下七牛云的部分文档,打算使用QRSBox来自动上传图片. QR ...
- windows2008R2重建索引
windows索引服务 索引服务是一项系统服务(Indexing Service),使用文档筛选器读取整个文档,并提取文档和属性传递给索引程序,这个过程称为"索引".索引服务可以从 ...
- Kotlin笔记小结(For Java Developer)
这篇文章为kotlin学习记录,主要针对的是自己的知识盲区,不适用于新手. 文中所有demo均来自于kotlin官网 类型 整形 Type Size (bits) Min value Max valu ...
- 命令行安装django以及新建项目及应用
1:安装django项目,使用pip命令进行安装,默认安装的是最高版本,可以使用pip install django==1.1.11进行指定版本安装 2:新建django项目 2.1:首先切换到创建项 ...
- 官宣 .NET 7 Preview 2
今天,我们很高兴发布 .NET 7 预览版 2..NET 7 的第二个预览版包括对 RegEx 源生成器的增强.将 NativeAOT 从实验状态转移到运行时的进展,以及对"dotnet n ...
- Java基础—private、this关键字及get/set方法
Java基础-private\this关键字以及get\set方法 1.private关键字 private关键字通常用来修饰成员变量用来保护原有数据的安全,比如在下面学生类中 然后在测试类中调用成员 ...
- Docker——dockerfile
dockerFile介绍 dockerFile是用来构建docker镜像的文件!命令参数脚本! 步骤: 编写dockerFile文件 docker build构建成为一个镜像 docker run运行 ...