vue-vue-cli2目录结构介绍

  在使用vue-cli2初始化项目后,会出现如下的一个目录结构:

   下面依次简单简述下各目录和文件的作用:

    build:webpack的配置,但这里主要是插件、项目运行相关的配置

    config:也是webpack的配置,但不同是他主要是配置一些变量。和springboot的application.yml类似

    node_modules:依赖保存的地方

    src:写代码的地方

    static:静态资源存放的地方,比如html,css等等,不过像图片的话是放在src/assets目录下的

    .babelrc:babel的配置文件;babel是能将ES6转化成ES5的工具

    .editorconfiig:文本配置,也就是像文本代码,如html,css,js等使用的编码,缩进格式,换行符的配置

    .eslintignore:eslint是用来约束代码规范的,该代码也就是说哪些文件是不需要约束的,忽视掉

    .eslintrc:eslint的配置文件

    .gitigore:在上传到github时,哪些文件不需要上传

    index.html:项目的入口页面

    package.json:配置项目的基本信息和依赖的大概版本,这里强调一下,该文件的依赖版本只是指定大概的范围,具体真是下载的版本以package-lock.json为主

    package-lock.json:记录node_modules依赖的真是版本

    README.md:项目的说明书这样子

  上面的目录结构说完了,也顺便拓展下其他东西,我们看到cli2生成的package.json中的脚本:

   主要是dev和bulid这2个脚本:

  dev:是在开发时启动项目使用的脚本,一般都会使用webpack-dev-server作为本地服务器来热加载,方便测试

  build:打包项目到dist,但我们仔细看,cli2这使用的是node命令去执行 build文件夹下的build.js来打包;在没学习node前,我们对JS的印象是,它得在html中进行引入使用,最终在浏览器才能进行执行。好像从来没有独立运行过JS文件吧?

  不过像其他编程语言,比如Java,C....他们是可以独立运行的,但JS不行。但后来就有人用C++开发node,里面用到V8引擎,这样就能对JS文件解析并执行了,因此我们通常说node是JS的运行环境或服务器,就是因为他能独立执行JS文件。

  然后再来看项目目录下的index.html:

   代码是十分简洁的,一般我们不会去改这个文件

  还有Vue实例,通常是在src的main.js来写的:

   也要记住,通常这个Vue实例也不会去动他,index.html最终页面的展示是交付给App.vue来展示的,Vue实例相当根组件,App.vue是他的子组件,但对于很多来讲,App.vue是入口组件,也可以这么说啦,仁者见仁,智者见智!

原文地址:https://www.cnblogs.com/ibcdwx/p/14598673.html