基于webpack模板的vue项目目录详解

一、搭建的前提环境

(1)安装node环境,node版本4.0以上。安装node的时候会下载npm包管理器,利用npm安装开发依赖的插件包

二、利用vue-cli搭建一个vue项目

(1)全局安装vue-cli

npm install -g vue-cli

(2)创建一个webpack模板的vue.js项目

vue init webpack project-name

三、基于webpack模板的vue项目目录详解


图1 项目总目录

(1)main.js是我们的入口文件,主要作用是初始化vue实例并使用需要的插件


(2)App.vue是我们的主组件,所有的页面都是在App.vue里面进行切换的。其实你也可以理解为所有的路由也是App.vue的子组件。所以我将router标示为App.vue的子组件。


(3)index.html文件入口

(4)src放置组件和入口文件

(5)node_modules为依赖的模块

(6)config中配置了路径端口值等

(7)build中配置了webpack的基本配置、开发环境配置、生产环境配置等

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容...
    忘川慕白阅读 6,133评论 7 113
  • 我常常想不明白家人到底是怎么的一类人。
    Joseph_wang阅读 111评论 0 0
  • 启动tomcat 创建一个索引库(在浏览器中输入下面的命令) http://192.168.25.110:8180...
    Explorer_Mi阅读 634评论 0 0
  • Qt自带的动画框架用来做简单的控件动画效果是比较简单易用的,像是对控件的位移、缩放、不透明度这些来做动画效果。 动...
    玖零儛阅读 18,933评论 4 11
  • 最近看了Ongaro在2014年的博士论文《CONSENSUS: BRIDGING THEORY AND PRAC...
    山本聪阅读 7,014评论 2 19

友情链接更多精彩内容