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

桃扇骨 2023-07-10 08:19 24阅读 0赞

**本期内容**

☆ 创建项目

**目录**

一、前提

二、创建项目

--------------------

## 一、前提 ##

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

## 二、创建项目 ##

1、打开 cmd 控制台

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

![20200301113919878.png][]

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（默认：是）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70][]

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 项目。

[Link 1]: https://blog.csdn.net/weixin_42678675/article/details/104588442#%E4%BA%8C%E3%80%81%E5%AE%89%E8%A3%85%20VScode
[20200301113919878.png]: https://img-blog.csdnimg.cn/20200301113919878.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200301114026522.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ==,size_16,color_FFFFFF,t_70