本人是一枚前端小白,也是从零开始学习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搭建好的项目的更多相关文章

  1. vue cli搭建项目及文件引入

    cli搭建方法:需安装nodejs先 1.npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm,用cnpm下载 ...

  2. 使用@vue/cli搭建vue项目开发环境

    当前系统版本 mac OS 10.14.2 1.安装node.js开发环境 前端开发框架和环境都是需要 Node.js  vue的运行是要依赖于node的npm的管理工具来实现 <mac OS ...

  3. vue cli 3.0创建项目

    .npm i -g @vue/cli .vue create my-project 此处有两个选择: 1.default (babel, eslint)默认套餐,提供babel和eslint支持 2. ...

  4. Vue Cli 3:创建项目

    一 简介 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,有几个独立的部分. 1 CLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的 vue 命令.(vue ...

  5. 利用脚手架vue cli搭建vue项目

    vue.js https://vuejs.org/ 基础: http://cn.vuejs.org/v2/guide/installation.html 1.安装需要利用npm包管理器,所以首先安装n ...

  6. vue cli搭建项目

    1.首先电脑要在安装node环境下才能运行 2.全局安装webpack:npm install webpack -g 3.安装vue脚手架: npm install vue-cli -g 4.新建文件 ...

  7. vue cli搭建的vue项目 不小心开了eslint 一直报黄色的警告

    报错必须处理,警告也忍不了,发现在bulid -webpack.base.config.js 里找到 const createLintingRule = () => ({ /*test: /\. ...

  8. VUE环境搭建、创建项目、vue调试工具

    环境搭建 第一步 安装node.js 打开下载链接:   https://nodejs.org/en/download/    这里下载的是node-v6.9.2-x64.msi; 默认式的安装,默认 ...

  9. vue脚手架搭建移动端项目--flexible.js

    通过命令行 node -v 查看是否安装node环境 在 nodejs 和 webpack已安装的前提下,随便一个文件夹下,输入命令行 npm install vue-cli -g 安装完成后,通过 ...

  10. vue环境搭建及创建项目

    安装node环境:node环境下载地址:https://nodejs.org/zh-cn/download/,可根据对应的操作系统版本下载安装 安装完成后查看对应的node和npm版本,如没有出现对应 ...

随机推荐

  1. (六)目标检测算法之YOLO

    系列文章链接: (一)目标检测概述 https://www.cnblogs.com/kongweisi/p/10894415.html (二)目标检测算法之R-CNN https://www.cnbl ...

  2. LeetCode-098-验证二叉搜索树

    验证二叉搜索树 题目描述:给定一个二叉树,判断其是否是一个有效的二叉搜索树. 假设一个二叉搜索树具有如下特征: 节点的左子树只包含小于当前节点的数. 节点的右子树只包含大于当前节点的数. 所有左子树和 ...

  3. 如何为k8s中的pod配置QoS等级?

    1.概述 本文介绍如何为pod分配特定的QoS等级. 我们知道,在k8s的环境中,通过使用QoS等级来做决定,在资源紧张的时候,将哪些的pod进行驱逐,或者说如何对pod进行调度. OK,话不多说,让 ...

  4. PHP魔术方法11种

    1.构造函数:__construct(): 构造函数是类中的一个特殊函数,当我们使用new关键字实例化对象时,相当于调用了类的构造函数. function __construct($name){ $t ...

  5. java基础复习记录

    java基础复习记录(数组.对象.异常) 数组 数组的定义 数组是相同类型数据的有序集合.如:篮球队就是一个数组,队员球服上有号码,相当于索引.通过某一个的某一个号码来确认是某一个队员.数组中索引从0 ...

  6. 制作自己的rpm包,并为其制作patch包。

    本文分为两个部分,第一部分是制作一个简单的自己的rpm包,并安装运行它.第二部分是为其制作一个patch包,并通过spec配置文件去打补丁,安装.运行打补丁后的程序. 一.安装工具 [yh@local ...

  7. springboot Redistemplate的execute和 executePipelined

    springboot 的 RedisTemplate 的 execute 和 executePipelined 功能的区别 1.execute 以下是 springboot 官网原文: Redis p ...

  8. 保姆级SpringBoot+Vue图片上传到阿里云OSS教程

    小二是新来的实习生,作为技术 leader,我给他安排了一个非常简单的练手任务,把前端 markdown 编辑器里上传的图片保存到服务器端,结果他真的就把图片直接保存到了服务器上,这下可把我气坏了,就 ...

  9. 74CMS 3.0 CSRF漏洞

    一. 启动环境 1.双击运行桌面phpstudy.exe软件 2.点击启动按钮,启动服务器环境 二.代码审计 1.双击启动桌面Seay源代码审计系统软件 2.因为74CMS3.0源代码编辑使用GBK编 ...

  10. python psutila模块(示例)

    # qianxiao996精心制作 #博客地址:https://blog.csdn.net/qq_36374896 import psutil import time import datetime ...