从零开始搭建Vue2.0项目(一)之快速开始

前言

该样板适用于大型和严肃的项目,用于快速搭建企业级的vue项目。

如果你只想尝试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

[图片上传失败...(image-8f7a2b-1648582372365)]

安装完成后,成功运行:

[图片上传失败...(image-38886c-1648582372365)]

项目结构

.
├── 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                # 构建脚本和依赖关系

前后端分离的一个项目搭建的进度完成了1/3,下一步是配置跨域和请求,
我是Java白羊,一只想做全栈的小羊,感谢大家的观看ヾ(◍°∇°◍)ノ゙!

你可能感兴趣的:(从零开始搭建Vue2.0项目(一)之快速开始)