zoukankan      html  css  js  c++  java
  • 如何使用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/>.

    clipboard.png
    在看看App.vue文件,里面只有一个<router-view/>,这是把全局的路由视图都收在这里。这就说明App.vue是全局性的文件。一般比如网站的topBar组件可以放在这里。

    clipboard.png
    然后看src文件目录,

    clipboard.png
    有个router文件夹,这是存放路由文件的地方,打开这个文件夹,里面有个index.js,我自己又添加了几个文件,这样容易看出路由结构来;

    clipboard.png
    我们可以看到,有个routes,不错他就是一个数组,它里面有三个json对象,每个对象代表一个页面路由,这三个路由是同级的。每个json中的三个属性字段,分别是路径,组件名称已经所需要的组件。然后你需要的写的东西,就是在这几个组件对应的文件中写相应的代码就行了。而components文件夹就是存放组件对应vue文件的。

    clipboard.png
    其实你完全可以在src里面另外建文件夹,只要路径引入的正确就行了。再有就是config文件夹,里面有个index.js,这里面有一些参数可以修改,比如port,就是跑项目是,项目展现的浏览器端口。autoOpenBrowser就是在跑项目的时候是否自动打开浏览器,如果是true,就不用手动打开浏览器,输入localhost:8080了,其他的一些配置项就自己研究吧,一般情况下用不到。

    clipboard.png

    clipboard.png

    由于是第一次写博客,么有经验。只是简单介绍一下,以后会慢慢长进的。有问题和要指点的,请留言。

  • 相关阅读:
    欢庆入住博客园
    指定线程所运行的CPU核心
    [GNU/Linux MakeFile] 第一章:概述
    [.NET][编程之美][1.1]C# 实现让CPU占用率曲线听你的指挥 – 可指定运行核心
    vmware workstation 7.1 正式版 序列号 注册机
    linux:设置 linux定时运行命令脚本 (crontab详解)
    守护进程(Daemon)
    Linux下定时执行脚本
    二叉树的遍历(转)
    dup,dup2,fcntl,ioctl用法简述
  • 原文地址:https://www.cnblogs.com/10manongit/p/12802762.html
Copyright © 2011-2022 走看看