码迷,mamicode.com
首页 > 其他好文 > 详细

从零开始搭建VUE项目

时间:2017-10-19 14:01:55      阅读:132      评论:0      收藏:0      [点我收藏+]

标签:单元测试   round   静态资源   nts   面向   simple   信息   watch   设置   

前言

      此样板面向大型,严肃的项目,并假定您对Webpack和vue-loader有些熟悉。 请务必阅读vue-loader的常见工作流配方的文档。

如果您只想尝试vue-loader或者鞭打一个快速原型,请改用webpack-simple模板。

快速开始:

    要使用这个模板,可以用vue-cli来支持一个项目。 建议使用npm 3+更高效的依赖关系树:

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

项目结构:

.
├── build/                      # webpack配置文件
│   └── ...
├── config/
│   ├── index.js                # 主要项目配置
│   └── ...
├── src/
│   ├── main.js                 # 应用入口文件
│   ├── App.vue                 # 主应用程序组件
│   ├── components/             # ui组件
│   │   └── ...
│   └── assets/                 # 模块资源(由webpack处理)
│       └── ...
├── static/                     # 纯静态资源(直接复制)
├── test/
│   └── unit/                   # 单元测试
│   │   ├── specs/              # 测试spec文件
│   │   ├── index.js            # 测试构建条目文件
│   │   └── karma.conf.js       # 测试跑步者配置文件
│   └── e2e/                    # e2e测试
│   │   ├── specs/              # 测试spec文件
│   │   ├── custom-assertions/  # e2e测试的自定义断言
│   │   ├── runner.js           # 测试跑步脚本
│   │   └── nightwatch.conf.js  # 测试跑步者配置文件
├── .babelrc                    # babel 配置
├── .postcssrc.js               # postcss 配置
├── .eslintrc.js                # eslint 配置
├── .editorconfig               # editor 配置
├── index.html                  # index.html模板
└── package.json                # 构建脚本和依赖关系

下面详细讲解下这个项目解构:

   build/

        此目录包含开发服务器和生产webpack构建的实际配置。 通常,您不需要触摸这些文件,除非您要自定义Webpack加载器,在这种情况下,您应该看看build / webpack.base.conf.js。

   config/index.js

        这是显示构建设置的一些最常见配置选项的主配置文件。 有关详细信息,请参阅开发期间的API代理和后端框架集成。

    src/

        这是你的大部分应用程序代码所在的位置。如何构建此目录中的所有内容,主要取决于您; 如果您使用Vuex,您可以查阅Vuex应用程序的建议。

    static/

        此目录是您不想使用Webpack进行处理的静态资源的一个逃生舱口。 它们将直接复制到生成webpack建立资产的同一个目录中。

有关详细信息,请参阅处理静态资产。

    test/unit

        包含单元测试相关文件。 有关详细信息,请参阅单元测试

    test/e2e

         包含e2e测试相关文件。 有关详细信息,请参阅端到端测试。

 index.html

         这是我们的单页应用程序的模板index.html。 在开发和构建期间,Webpack将生成资产,并将生成的资产的URL自动注入到此模板中以呈现最终的HTML。

    package.json

        包含所有构建依赖项和构建命令的NPM软件包元文件。

从零开始搭建VUE项目

标签:单元测试   round   静态资源   nts   面向   simple   信息   watch   设置   

原文地址:http://www.cnblogs.com/cczlovexw/p/7691786.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!