搭建一个完整的vue框架和基于vue-cli创建一个项目

vue-cli脚手架文件详解
https://www.cnblogs.com/hongdiandian/p/8311645.html

vue-cli脚手架目录一览

转载自:https://www.cnblogs.com/hongdiandian/p/8311645.html

最近在学习vue,看的稀里糊涂。今天从头开始,把cli配置的vue项目目录和配置文件搞清楚。

先看看整个项目目录结构:

image

再看看build文件夹下相关文件及目录:

image

config文件夹下目录和文件:

image

接下来说说vue-cli项目中页面相关的主要文件o

首先是index.html:

说明:一般只定义一个空的根节点,在main.js里面定义的实例将挂载在#app节点下,内容通过vue组件填充。

image

App.vue文件:

说明:app.vue是项目的主组件,所有页面都是在app.vue下切换的。一个标准的vue文件,分为三部分。

第一装写html代码在<template></template>中,一般在此下面只能定义一个根节点;

第二<script></script>标签;

第三<style scoped></style>用来写样式,其中scoped表示。该style作用于只在当前组件的节点及其子节点,但是不包含子组件呦。

<router-view></router-view>是子路由视图,后面的路由页面都显示在此处,相当于一个指示标,指引显示哪个页面。

image

main.js:

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

image

router下面的index.js文件:路由配置文件。

说明:定义了三个路由,分别是路径为/,路径为/msg,路径为/detail。后续会详细说明,因为我也是才学好多东西不懂,囧。

image

转载自:https://www.cnblogs.com/wisewrong/p/6255817.html
理解index.html App.vue main.js 转载自:https://zhuanlan.zhihu.com/p/34859248
2、index.html、App.vue、main.js、index.js 四个文件的联系

使用vue-cli创建项目

https://www.cnblogs.com/wisewrong/p/6255817.html
需要注意的点:执行$ vue init webpack data-analysis-system指令时,data-analysis-system不能大写

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容