如何使用vue-cli搭建一个好的项目
时间：2023-04-05 17:29:58
HTML5
本人是前端小白，也是从零开始学习vue.js。由于游手好闲之苦，写一点自己的经历可能有点low。如果你是想入门的新手，可以看看。如果有高手，也可以指导一下。我很感激。关于如何使用vue-cli搭建vue项目，这里就不赘述了，直接转发一篇博客，大家自己看就好了。https://www.cnblogs.com/wisew...首先我建议在搭建脚手架的时候，最好使用eslint格式校验，这样代码写的更规范（虽然有点烦).当项目构建完成后，你会发现整个目录下只有一个html文件--index.html，它是整个项目的dom载体。这个文件里面只有一个
，这个div是挂在dom载体上的一个钩子，可以挂载其他.vue文件。打开src文件夹，里面的main.js就是入口文件。如果整个项目需要进行影响全局的操作，可以在main.js中完成，几乎不涉及index.html。下图中红色标记的部分是新建一个vue实例，然后挂载到#app上，这个vue实例中使用的组件是
。查看App.vue文件，只有一个
，这个就是把所有的全局路由视图收集到这里。这表明App.vue是一个全局文件。一般比如网站的topBar组件就可以放在这里。然后看src文件目录，有一个router文件夹，里面是存放路由文件的地方，打开这个文件夹，里面有一个index.js，我多加了几个文件，这样方便看路由结构；我们可以看到，有一个routes，它是一个数组。里面有3个json对象，每个对象代表一个页面路由。这三个路由处于同一级别。每个json中的三个属性字段分别是路径、组件名称和需要的组件。那么你需要写的就是在这些组件对应的文件中写上相应的代码。components文件夹是存放组件对应的vue文件的地方。其实也可以在src中再创建一个文件夹，只要路径导入正确即可。然后是config文件夹，里面有一个index.js，里面有一些参数可以修改，比如port，就是项目运行时显示的浏览器端口。autoOpenBrowser是运行项目时是否自动打开浏览器。如果为真，则无需手动打开浏览器输入localhost:8080。其他配置项可以自行研究，一般不会用到。由于是第一次写博客，所以没什么经验。只是简单的介绍，以后会慢慢成长。如果您有任何问题或建议，请留言。
