今天看啥  ›  专栏  ›  云动

vue-cli 3.0脚手架,从入门到放弃(二)

云动  · 掘金  ·  · 2019-08-28 15:14
阅读 41

vue-cli 3.0脚手架,从入门到放弃(二)

1.vue-cli 3.0脚手架,从入门到放弃(一)

菜鸟上路,高手请绕道。^_^

工欲善其事,必先利其器!

使用工具

想写好代码,和用好一个工具是离不开的, 一般我们使用的工具有 HuilderX,sublimetext3,vscode,webstorm等,个人目前使用的是hb,和vscode,可以根据个人爱好各自选择,但一定要熟练。

vue-cli3.0目录结构

这是创建完项目后的基础目录结构,这里我导入了bootstrap框架。接下来从上到下的看一下每个文件以及文件是干嘛的 。

node_modles此目录里面全部都是node的一些基础的依赖包,当我们拓展的安装一些别的插件时 也会装在这个文件夹里。

public 目录为公共文件夹,会被打包编译至dist(运行 npm run build 命令)目录,index.html 为项目入口,↓

vue一般为单页面项目,只有index一个入口,但可以在head里,像普通的html文件一样, 进行link引入。

src 文件夹,是你主要写代码和配置的地方,

assets目录,一般放置图片等静态资源,

components为公共组件,

views下为所有路由的组件,

App.vue 为页面入口文件,同index.html,

main.js 程序入口文件,加载各个公共组件,

router.js 路由页,我们所有的.vue文件都要由此管理登记,

store.js 通过vuex进行状态管理,

.editorconfig EditorConfig帮助开发人员在不同的编辑器和IDE之间定义和维护一致的编码样式。EditorConfig项目由用于定义编码样式的文件格式和一组文本编辑器插件组成,这些插件使编辑器能够读取文件格式并遵循定义的样式。EditorConfig文件易于阅读,并且与版本控制系统配合使用。不同的开发人员,不同的编辑器,有不同的编码风格,而EditorConfig就是用来协同团队开发人员之间的代码的风格及样式规范化的一个工具,而.editorconfig正是它的默认配置文件。

.gitgnore git配置文件,详情参考git,

babel.config.js 参考babel 官网,www.babeljs.cn/docs/ ,可以转换es5 、es6,

package-lock.json 是锁定安装时的包的版本号,并且需要上传到git,以保证其他人在npm install时大家的依赖能保证一致。

package.json 插件依赖配置的文件。

最后的README.md 是一个Markdown文档,可以写项目的介绍啥的~~


写不动了,下篇写各个文件的用法吧o(╥﹏╥)o




原文地址:访问原文地址
快照地址: 访问文章快照