一、mode_modules:项目的依赖文件夹
public:用于存放项目使到的一些静态资源(图片等),在最后webpack打包时会直接放入dist文件夹
src:程序的源代码文件夹
assetes:一般用于放置src里的组件所使用的静态资源(图片等),在最后webpack 打包时会直接当成一个模块打包到js文件夹里
components:一般用于放置非路由组件和全局组件
App.vue:项目中唯一的根组件
main.js:程序的入口文件,项目中的第一个执行文件
babel.config.js:项目的配置文件,一般用于兼容es5和es6语法
package.json:记录vue项目的相关信息
二、
build文件夹:里面是对webpack开发和打包的相关设置,包括入口文件,使用的模块等
config文件夹:主要是指定开发和打包中的静态资源路径,要压缩的文件类型,开发使用的端口号,
dev.env.js文件是开发环境的变量,npm run dev 命令
index.js环境变量及其基本变量的配置,分dev配置和production配置
prod.env.js文件是生产环境的变量,npm run build命令
node_modules:项目的依赖库,可在项目所在位置使用cmd命令:npm install 进行更新和下载
src文件夹:我们主要操作的地方,组件的增加修改都在这个文件夹里操作
assets:放置静态资源,包括公共的css文件,js文件,iconfig字体文件,img图片文件,以及其他资源类文件,之所以强调是公共的css文件,是因为要在组件的css标签里加入scoped标记,将其作用范围限制在此组件以及调用它的父级组件中,避免污染全局样式。
components:放置通用的模块组件,避免污染全局样式
router:index.js放置路由设置文件
App.vue:入口组件,pages里的组件会被插入此组件中,此组件再插入index.html文件里,形成单页面应用
main.js:入口js文件,影响全局,作用是引入全局使用的库,公共的样式和方法,设置路由等。
static文件夹:静态资源文件夹,放回不会变动的资源,直接被复制到最终的打包目录(默认是dist/static)下
src:项目的主文件夹
assets:资源文件
components:vue组件
components 下的**.vue文件就可以具体编写每一个vue,最后通过router-link连接给定的path路径,可以调用vue对象
router:设置路由,指定路由对应的组件
router/index.js中 main.js中router是通过router文件映射而router下的index.js