Vue2.X项目结构讲解

首先需要安装node.js和vue-cli。
创建项目指令:$ vue create vue-demo(项目名称)
可以选择默认配置,也可以自己配置sass/less预编译语言、router路由、vuex状态管理工具、eslint语法校验工具、路由模式等。
基本目录结构如下
Vue2.X项目结构讲解
node_modules??第三方依赖包存放目录,此目录下的文件不会push到git远程仓库上。此目录不需要手动创建,使用npm或yarn命令安装第三方依赖会自动生成。
public??外部静态文件存放目录,如index.html,全局配置文件config.js。
Vue2.X项目结构讲解
src/assets??内部静态文件存放目录,如fontawesome字体图标源文件、项目可能用到的图片素材等。
Vue2.X项目结构讲解
src/components??项目公共组件存放目录,多个地方都用到的组件我们会提取到一个vue文件完成并存放至此,其它vue文件通过import方式引入,这不仅可以大大减少代码量,维护时也只需修改一份代码,这是vue特色之一!
Vue2.X项目结构讲解
src/router??入口文件index.js为搭建项目自动生成,主要配置路由与vue文件的关系,即指定某个路由url为某个vue文件的内容。
Vue2.X项目结构讲解
src/store??vuex状态管理目录,存在意义是解决父子组件间通信问题,相当于项目的一个公共资源中转站,谁都可以向它提交数据或请求数据,vuex是大型项目必不可少的工具!
Vue2.X项目结构讲解
src/utils??自建目录,主要存放一些公共的js方法,与组件类似,使用时把它export出去并挂载至vue原型链中即可。
src/views??页面存放目录,存放系统中的页面,建议内部目录结构与路由层级保持一致,方便维护及他人阅读代码。
Vue2.X项目结构讲解
src/App.vue??可在此处style写全系统公共样式,以及系统启动事件等。
src/mani.js??可在此处按需引入element等第三方组件、挂载vue原型链、配置路由守卫、配置全局filter过滤器等。
Vue2.X项目结构讲解
package.json??此文件自动生成,主要用于记录项目需要的依赖包及版本、当使用npm install 或 yarn install 命令时,会根据此文件安装依赖包。
vue.config.js??此文件现不会自动生成,需手动创建,主要完成项目的基础配置、如代理服务器、高德地图配置、基础目录、打包输出路径等。
Vue2.X项目结构讲解

Vue2.X项目结构讲解

上一篇:阿里云acp考试实验什么时候做?购买的ACP考试码过期了怎么办?


下一篇:自定义比较方法