您的位置：首页 > Web前端 > Vue.js

vue-cli项目结构详解

2018-07-25 16:45 369 查看
使用vue-cli 搭建项目之后生成的项目目录如下：

  • build: 中配置了webpack的基本配置、开发环境配置、生产环境配置等(都已经配置好，一般不需要再进行配置)，主要启动文件是dev-server.js，当我们输入npm run dev首先启动的就是dev-server.js，它会去检查node及npm版本，加载配置文件，启动服务。
    build.js: 生产环境构建
  • check-versions.js: 版本检查(node,npm)
  • utils.js: 构建相关工具
  • vue-loader.conf.js: css加载配置
  • webpack.base.conf.js: webpack基础配置
  • webpack.dev.conf.js: webpack开发环境配置
  • webpack.prod.conf.js: webpack生产环境配置
  • config:主要是项目相关配置，我们常用的就是当端口冲突时配置监听端口，打包输出路径及命名等
      dev.env.js: 项目开发环境配置
    • index.js: 项目主要配置（主要包括监听端口、打包路径等）
    • prod.env.js: 项目生产环境配置
  • dist: 是打包上线，执行了 
    npm run build
    命令，之后产生的打包文件
  • node_modules: npm 加载的项目依赖模块
      node_modules里面是项目依赖包，其中包括很多基础依赖，自己也可以根据需要安装其他依赖。安装方法为打开cmd，进入项目目录，输入npm install [依赖包名称],回车。
    • 在两种情况下我们会自己去安装依赖：
      （1）项目运行缺少该依赖包：例如项目加载外部css会用到的css-loader，路由跳转vue-loader等（安装方法示例：npm install css-loader）
    • （2）安装插件：如vux（基于WEUI的移动端组件库），vue-swiper（轮播插件）
  • 注：有时会安装指定依赖版本，需在依赖包名称后加上版本号信息，如安装11.1.4版本的vue-loader，输入npm install vue-loader@11.1.4
  • src: 项目核心文件（开发的代码基本都在这个目录下进行操作）
      assets: 放置一些静态资源（样式类文件，如css,less,sass以及一些外部js文件）
    • components: 公共的组建
    • router: 路由，配置项目路由
      index.js: 路由配置文件
  • App.vue: 是我们的跟组件。
      所有页面都是在App.vue下面进行切换的，可以理解为所有的组件都是App.vue的子组件，我们可以把头部和底部及每个页面都出现的内容放在App.vue里面。
    • 一个vue页面通常由三部分组成:模板(template)、js(script)、样式(style)
  • main.js: 入口文件，主要是引入vue框架，根组件及路由设置，并且定义vue实例。
  • static: 静态资源目录，如图片、字体等。
  • .babelrc: babel编译参数
  • .editorconfig: 代码格式
  • .gitignore: git上传需要忽略的文件配置
  • .postcssrc.js: 转换css的工具
  • index.html: 主页。
      index.html如其他html一样，但一般只定义一个空的根节点，在main.js里面定义的实例将挂载在根节点下，内容都通过vue组件来填充
  • package.json: 项目的基本信息（在创建vue-cli项目后自动生成）
  • package-lock.json: 在 
    npm install
    时候生成一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号。
  • README.md: 项目说明
    • 阅读更多
    内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
    标签： 
    相关文章推荐
    新的分享
    章节导航