vue项目目录

先看目录结构:

├── build                      // 构建相关
├── config                     // 配置相关
├── src                        // 源代码
│   ├── api                    // 所有请求
│   ├── assets                 // 主题 字体等静态资源
│   ├── components             // 全局公用组件
│   ├── directive              // 全局指令
│   ├── filtres                // 全局 filter
│   ├── icons                  // 项目所有 svg icons
│   ├── lang                   // 国际化 language
│   ├── mock                   // 项目mock 模拟数据
│   ├── router                 // 路由
│   ├── store                  // 全局 store管理
│   │    ├── index.js          //注入所有vuex相关,并导出
│   │    ├── getters.js        //store的计算属性
│   │    ├── muattion.js       //更改store中的状态(唯一方法)
│   │    ├── state.js          //储存状态
│   │    └── actions.js        //维护异步数据
│   └── Tinymce                // 富文本
│   ├── styles                 // 全局样式
│   ├── utils                  // 全局公用方法
│   ├── vendor                 // 公用vendor
│   ├── views                   // view
│   ├── App.vue                // 入口页面
│   ├── main.js                // 入口 加载组件 初始化等
│   └── permission.js          // 权限管理
├── static                     // 第三方不打包资源
│   └── Tinymce                // 富文本
├── .babelrc                   // babel-loader 配置
├── eslintrc.js                // eslint 配置项
├── .gitignore                 // git 忽略项
├── favicon.ico                // favicon图标
├── index.html                 // html模板
└── package.json               // package.json
 

原文地址:https://www.cnblogs.com/ralapgao/p/9634937.html

时间: 2024-07-31 16:00:35

vue项目目录的相关文章

Vue Vue项目目录结构梳理

Vue项目目录结构梳理   by:授客 QQ:1033553122 1.   结构梳理   . ├── build/                      # webpack 配置文件: │   └── ... ├── config/                      # 与项目构建相关的常用的配置选项: │   ├── index.js                # 主配置文件 │   ├── dev.env.js              # 开发环境变量 │   ├── p

vue项目目录结构

如上图所示,我们的目录结构就是这样的了. 目录/文件 说明 build 这个是我们最终发布的时候会把代码发布在这里,在开发阶段,我们基本不用管. config 配置目录,默认配置没有问题,所以我们也不用管 node_modules 这个目录是存放我们项目开发依赖的一些模块,这里面有很多很多内容,不过高兴的是,我们也不用管 src 我们的开发目录,基本上绝大多数工作都是在这里开展的 static 静态资源 .xxxx文件 这些是一些配置文件,包括语法配置,git配置等.基本不用管,放着就是了 in

vue项目目录结构详解

项目简介基于 vue.js 的前端开发环境,用于前后端分离后的单页应用开发,可以在开发时使用 ES Next.scss 等最新语言特性.项目包含: 基础库: vue.js.vue-router.vuex.whatwg-fetch 编译/打包工具:webpack.babel.node-sass 单元测试工具:karma.mocha.sinon-chai 本地服务器:express 目录结构 ├── README.md            项目介绍 ├── index.html          

vue项目目录介绍

尽管vue-cli已经优化了好多配置和目录机构,但是下面的介绍还是有用的. build webpack 配置相关 config webpack 配置相关 src源码 static 第三方静态资源 .gitkeep git默认不提交空目录 放在空目录中,可以使git提交的时候,提交该目录. .babelrc babel的配置,es6代码通过babel编译成es5. presets预设,表示预先要安装哪些插件: plugins,表示要安装的插件,这些插件很有可能互相依赖 .editorconfig

使用vue-cli初始化vue项目

在项目中使用vue我使用vue-cli脚手架搭建项目 1.先安装nodejs 2.使用npm install -g vue-cli (建议在使用这步前先安装nrm来切换npm的源利器,使得下载资源更快速 npm install -g nrm nrm ls(即可查看npm 的源利器有哪些) nrm use (切换npm的源利器) 然后就可以使用npm install 你需要下载的包 ) 3.vue --version 4. vue init webpack myproject( vue init 

使用vue-cli搭建vue项目的初始化

在项目中使用vue我使用vue-cli脚手架搭建项目 1.先安装nodejs 2.使用npm install -g vue-cli (建议在使用这步前先安装nrm来切换npm的源利器,使得下载资源更快速 npm install -g nrm nrm ls(即可查看npm 的源利器有哪些) nrm use (切换npm的源利器) 然后就可以使用npm install 你需要下载的包 ) 3.vue --version 4. vue init webpack myproject( vue init 

如何搭建一个vue项目(完整步骤)

参考资料 一.安装node环境 1.下载地址为:https://nodejs.org/en/ 2.检查是否安装成功:如果输出版本号,说明我们安装node环境成功 3.为了提高我们的效率,可以使用淘宝的镜像:http://npm.taobao.org/ 输入:npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了. 检查是否安装成功: 二.搭建vue项目环境 1

Vue项目环境的搭建

Vue项目环境搭建 node 是由c++编写的专门用来运行javascript语言的. npm(cnpm)~~pip:npm是一个终端应用商城,就像python的pip一样,只不过他服务器也在国外,所以可以换国内源cnpm vue~~django:vue是用来搭建vue前端项目的. js是前端的弱语言的脚本编程语言,而node则是一个后端语言 1.安装node 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 2.换源安装cnpm,后续下载只需要将npm换成cnpm

Vue框架(三)——Vue项目搭建和案例

Vue项目环境搭建 1) 安装node,在官网下载好,然后在本地安装 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 2) 换源安装cnpm >: npm install -g cnpm --registry=https://registry.npm.taobao.org 3) 安装vue项目脚手架 >: cnpm install -g @vue/cli 注:2或3终端安装失败时,可以清空 npm缓存 再重复执行失败的步骤 npm cache clean --f