vue 脚手架

最新推荐文章于 2024-08-06 19:05:22 发布

December_shi

最新推荐文章于 2024-08-06 19:05:22 发布

阅读量384

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/december_shi/article/details/114674084

版权

本文详细介绍了使用Vue脚手架创建项目的过程，包括起步、手动创建项目、图形化创建项目的步骤。接着，通过实例展示了如何编写博客项目，包括列表展示、详情页、添加、编辑和删除功能的实现。在实现过程中，讲解了如何传递和接收ID，以及相关组件和路由的配置方法。

摘要由CSDN通过智能技术生成

脚手架

1、起步

安装：

win+R 输入cmd
运行命令
```
npm install -g @vue/cli
```
安装中：

安装完成：

2、创建项目

如何创建项目官网步骤

选择好文件夹，按住shift+右键，选择在此处打开 Powershell 窗口

在这里插入图片描述

在命令行敲命令来创建项目
```
vue create 项目名称
```
这时候会跳转到选择项中
此次项目依次选择：Manually select features —— Choose Vue version，Babel，Router —— 2.x —— No —— In dedicated config files —— No
等待就自动安装好了。
安装好后，运行命令
```
# 先进入项目里面 项目名为 hello-world
cd hello-world
# 运行下面命令启动
npm run serve
```
运行完毕后，会启动下面地址，证明成功了

点击上面的 http://localhost:8080/ 会自动跳转到下面页面

这时候创建项目已经完成

3、图形化也可以创建项目

运行命令

vue ui

在这里插入图片描述

这时候会自己打开网页图形化创建页面，具体操作没研究透，只做了解。

在这里插入图片描述

补充：

查看vue版本号命令：

vue -V

卸载vue命令：

npm uninstall @vue/cli -g

博客项目编写（数据写死在前台）

1、列表展示和详情页（博客）

展示实现的步骤

在views文件夹下创建展示，添加，修改组件

编写展示组件代码

<template>
    <div class="list">
        <table>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>标题</th>
                    <th>发表时间</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in posts" :