首页 技术 正文
技术 2022年11月10日
0 收藏 594 点赞 3,845 浏览 1242 个字

Vue CLI是基于Vue.js进行快速发展的完整系统,提供了:

  • 交互式的项目脚手架
  • 实现零配件的原型开发
  • 图形化的创建和管理项目的界面

基本框架的构建:

.
├── build/ # webpack 配置文件
│ └── ...
├── config/
│ ├── index.js # 项目核心配置
│ └── ...
├── src/
│ ├── main.js # 程序入口文件
│ ├── App.vue # 程序入口vue组件
│ ├── components/ # 组件
│ │ └── ...
│ └── assets/ # 模块资源 (会被webpack处理)
│ └── ...
├── static/ # 纯静态资源 (直接拷贝到dist/static/里面)
├── test/
│ └── unit/ # 单元测试
│ │ ├── specs/ # 测试规范
│ │ ├── index.js # 测试入口文件
│ │ └── karma.conf.js # 测试运行配置文件
│ └── e2e/ # 端到端测试
│ │ ├── specs/ # 测试规范
│ │ ├── custom-assertions/ # 端到端测试自定义断言
│ │ ├── runner.js # 运行测试的脚本
│ │ └── nightwatch.conf.js # 运行测试的配置文件
├── .babelrc # babel 配置文件
├── .editorconfig # 编辑配置文件
├── .eslintrc.js # eslint 配置文件
├── index.html # index.html 入口模板文件
└── package.json # 运行的脚本与相关依赖

一般来说的话,我们在src下写代码,所以主要关注的还是src文件夹

index.html -> 项目的主页,和其他的html一样,但一般只定义一个空的根节点,在main.js里面定义的实例将挂载在根节点下,内容都通过vue组件填充。

main.js -> 入口文件,主要是引入vue框架、根组件及路由设置,并且定义vue实例

App.vue -> 根组件,分为三个模块,一般来说,配置路由引入其他的组件

router -> 路由配置,在路由下面有一个index.js的路由配置文件,负责路由的调用和配置

首先引入vue-router路由依赖(import Router from ‘vue-router’) 使用路由依赖(Vue.use(Router))

然后引入页面组件,import HelloWorld from ‘@/components/HelloWorld’

最后就是路由的配置了,主要就是配置组件的路径、名字、和组件的名称。一般来说所有的组件的路由都是在这里配置,包括子组件

HelloWorld.vue -> 页面组件,起初本页面是在components下的,但是建议还是将一般的页面组件放置在一个view的文件下(同时也是src的子文件)

个人理解:就是一个Vue的项目展开之后,首先就是进入入口文件main.js然后呢,加载index.html主页文件,之后就是App.vue组件了,创建了vue实例,然后呢就是vue的生命周期了。

关于Vue-CLI的学习目前就是这些了,到之后技术增长继续吧

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,492
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,907
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,740
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,495
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:8,132
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:5,295