03-vue-cli-项目创建

我就是我 2024-04-05 07:20 89阅读 0赞

## 1. 打开存放新建项目的文件夹 ##

![2b471416d22b8354463bbf0322b5ed83.png][]

打开开始菜单，输入 CMD，或使用快捷键 win+R，输入 CMD，敲回车，弹出命令提示符。打开你将要新建的项目目录

![eb8c1692bc18849e86bc494f990f6332.png][]

## 2 根据模版创建新项目 ##

在当前目录下输入“vue init webpack项目名称（使用英文）”

vue init webpack mytest

![a9b8334af89f0823e25e0b1778ea3ee7.png][]

![64fb15212993bb5fcd16156e858eb74a.png][]

**注意如下选择 No**

![53c56e90d9bff9bd98d50aa406502986.png][]

![93c48afc41c20e8ba12fa1eb454e6b42.png][]

成功如下图

![8f59c9fb574e4fef36a92ff15785022f.png][]

#### 3 初始化完成后的项目目录结构如下： ####

![8a3a0567ba5ddf072812804dbc1a7d2b.png][]

![661d14e0533c9305fd70557caf626eb5.png][]

### 4 cnpm run dev 运行该项目，测试一下该项目是否能够正常工作，这种方式是用nodejs来启动。 ###

![afb17ca392b8a5f8fb2c7879826ca72c.png][]

### 5. 输入地址 http://localhost:8080 访问，看到如图 ###

![95942d57bb573b55f393d1a3f349f7c8.png][]

## **6.vue-cli 设置启动页面**  ##

1.在src 的components目录下创建Login.vue

2.打开src---router---index.js文件，引入login.vue模块import Login from

'@/components/Login'

更改路由地址name 和componet的值，如图

3.打开App.vue 删除 图片log的代码，如图

4.更改完毕

![ee3360033736a8bd97b7f1b4e1e4267f.png][]

[2b471416d22b8354463bbf0322b5ed83.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/5c9ca6b261b04d318b64d0fff4cd0306.png
[eb8c1692bc18849e86bc494f990f6332.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/664b690a62ec4ecab3873eb09c85d5d6.png
[a9b8334af89f0823e25e0b1778ea3ee7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/ef0fb1ae05d44f95aa4924ac3647b583.png
[64fb15212993bb5fcd16156e858eb74a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/ee5b7277119644bf8beb72f3c20ee47a.png
[53c56e90d9bff9bd98d50aa406502986.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/fb95ba674cb34173b6bb7b7e028979fe.png
[93c48afc41c20e8ba12fa1eb454e6b42.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/9f5c2a7a2f094e538814910079064adb.png
[8f59c9fb574e4fef36a92ff15785022f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/2f02f314bf584371a52c5b9dc5c62ed6.png
[8a3a0567ba5ddf072812804dbc1a7d2b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/2ddc9584c10e4ec791c4b6f42ea19095.png
[661d14e0533c9305fd70557caf626eb5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/95abd9cdb7ac4da4b765bac669e98c4b.png
[afb17ca392b8a5f8fb2c7879826ca72c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/9d575028f89e481dba26f01c0193a0b5.png
[95942d57bb573b55f393d1a3f349f7c8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/b0213a9979a0406993cb5da0bc2bc1d7.png
[ee3360033736a8bd97b7f1b4e1e4267f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/39e39cd03adb4082ab1ae8c216322d77.png