如何使用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了,其他的一些配置项就自己研究吧,一般情况下用不到。
由于是第一次写博客,么有经验。只是简单介绍一下,以后会慢慢长进的。有问题和要指点的,请留言。
最新文章
- JDBC 练习
- Sharepoint学习笔记—ECM系列--文档集(Document Set)的实现
- 移动前端UI选择
- php发送http put/patch/delete请求
- java 正则表达式获取匹配和非获取匹配
- Jenkins进阶系列之——09配置Linux系统ssh免密码登陆
- (easy)LeetCode 219.Contains Duplicate II
- 58. Length of Last Word【leetcode】
- 关于input内容改变的触发时间
- Terminating app due to uncaught exception &#39;CALayerInvalid&#39;, reason: &#39;layer <;CALayer: 0x7fda42c66e30>; is a part of cycle in its layer tree&#39;
- Windows下的OpenCVSharp配置
- 课程五(Sequence Models),第二 周(Natural Language Processing &; Word Embeddings) —— 2.Programming assignments:Emojify
- Python3 File
- day05数据类型,数字类型,字符串类型,字符串的操作方法,列表类型的操作方法,可变类型与不可变类型
- 代码之髓读后感——语法&;流程&;函数&;错误处理
- ubuntu16.04 编译安卓4.2
- Android_view的生命周期
- 从Java进程里dump出类的字节码文件
- 牛腩记账本core版本源码
- socat 简单试用