从零开始搭建VUE项目
Posted 前端开发-阿锋
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了从零开始搭建VUE项目相关的知识,希望对你有一定的参考价值。
前言:
此样板面向大型,严肃的项目,并假定您对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项目的主要内容,如果未能解决你的问题,请参考以下文章
原创从零开始搭建Electron+Vue+Webpack项目框架,一套代码,同时构建客户端web端