【Vue】用 Vue-Cli 创建 Vue 项目

本期内容

☆ 创建项目

目录

一、前提

二、创建项目

---

一、前提

安装了 vue-cli 和 node.js ，未安装的点这里查看

二、创建项目

1、打开 cmd 控制台

2、进入到要存放项目的文件夹位置

3、输入创建项目命令

vue init webpack

4、输入配置项（默认值回车即可）

路由该怎么理解：页面中分为静态结构和动态页面结构，静态页面通过引入组件，而动态页面则需要通过路由进行跳转展现。表示为：<router-view />

TODO：单元测试 & 金字塔顶端测试 用法与选择

• Project name：项目名（自定）
• Project description：项目描述（自定）
• Author：作者（自定）
• Vue build：Vue项目打包（使用默认值）
• Install vue-router：是否使用路由模块（默认：是）
• Use ESlint to lint your code：是否用 ESLint 规范代码格式（默认：是）
• Pick an ESLint preset：选择 ESLint 的预设值（默认：标准）
• Set up unit tests：是否使用单元测试模块（本例中：否）
• Setup e2e tests with Nightwatch：是否使用金字塔顶端测试（本例中：否）
• should we run `npm install` for you after the project has been created(recommended)：是否使用包管理工具 npm（默认：是）

5、安装依赖

npm install

6、启动项目

npm run dev

7、目录结构

├── build/                      # webpack 编译任务配置文件: 开发环境与生产环境
│   └── ...
├── config/                     
│   ├── index.js                # 项目核心配置
│   └── ...
├ ── node_module/               #项目中安装的依赖模块
   ── src/
│   ├── main.js                 # 程序入口文件
│   ├── App.vue                 # 程序入口vue组件
│   ├── components/             # 组件
│   │   └── ...
│   └── assets/                 # 资源文件夹，一般放一些静态资源文件
│       └── ...
├── static/                     # 纯静态资源 (直接拷贝到dist/static/里面)
├── test/
│   └── unit/                   # 单元测试
│   │   ├── specs/              # 测试规范
│   │   ├── index.js            # 测试入口文件
│   │   └── karma.conf.js       # 测试运行配置文件
│   └── e2e/                    # 端到端测试
│   │   ├── specs/              # 测试规范
│   │   ├── custom-assertions/  # 端到端测试自定义断言
│   │   ├── runner.js           # 运行测试的脚本
│   │   └── nightwatch.conf.js  # 运行测试的配置文件
├── .babelrc                    # babel 配置文件
├── .editorconfig               # 编辑配置文件
├── .gitignore                  # 用来过滤一些版本控制的文件，比如node_modules文件夹 
├── index.html                  # index.html 入口模板文件
└── package.json                # 项目文件，记载着一些命令和依赖还有简要的项目描述信息 
└── README.md                   #介绍自己这个项目的，可参照github上star多的项目。
build/

至此，用 Vue-Cli 成功创建了 Vue 项目。