Vue CLI创建新项目,并运行

本文介绍了如何创建Vue项目,包括通过cmd或Powershell打开命令行,使用vuecli安装及检查版本,执行vuecreate命令创建项目,自定义配置,并在项目目录下通过npmrunserve启动项目。

1.准备工作

创建项目之前,我们需要知道在哪里创建;

第一种:

找到创建的文件,打开cmd方法;

 

 第二种方法:

1.打开需要创建vue项目的文件下,按住shift+鼠标右键;

2.点击”此处打开Powershell命令“;

2.安装vue cli脚手架

输入:

 npm install -g @vue/cli  

或者(如果上面按照过慢,用下面命令安装,下面通过的是淘宝镜像,安装会快一点)

cnpm install -g @vue/cli

3.安装完成后,输入vue --version;

如果能正常打印出vue 版本,说明安装成功;

 4.输入创建项目命令,vue create test2022;

1.项目名自定义,这里以”test2022“为例;

2.自定义配置项的选择和含义;

 3.出现如下,说明创建成功;

 5.启动项目vue项目命令;npm run serve

注意:启动项目时必须在新建的vue项目目录下执行启动命令;

如:必须在”test2022“目录下启动,输入npm run serve,才可以正常启动;

### 如何使用 Vue CLI 创建 Vue 项目创建一个基于 Vue新项目,可以按照以下方法操作。Vue CLI 是一种用于快速搭建现代前端开发环境的工具,它提供了开箱即用的功能以及灵活配置的能力。 #### 安装 Vue CLI 首先需要安装 Vue CLI 工具。如果尚未全局安装 Vue CLI,则可以通过 npm 或 yarn 来完成此过程: ```bash npm install -g @vue/cli # 或者 yarn global add @vue/cli ``` 验证 Vue CLI 是否成功安装查看其版本号: ```bash vue --version ``` 这一步骤确保了开发者能够访问到 `vue` 命令行工具[^1]。 #### 初始化一个新的 Vue 项目 通过运行以下命令来初始化新的 Vue 项目结构: ```bash vue create my-vue-app ``` 在此过程中会提示选择预设选项或者手动配置功能模块(例如 TypeScript、Router、Vuex 等)。对于初学者来说,默认的基础模板通常已经足够满足需求[^2]。 当选择了合适的设置之后,CLI 将自动下载依赖项将它们集成进项目的文件夹中。完成后进入刚建立好的目录下继续工作: ```bash cd my-vue-app ``` #### 配置路由链接 为了实现页面间的导航,在应用的主要入口组件 (`App.vue`) 中添加 `<router-link>` 和 `<router-view>` 标签是非常重要的步骤之一。具体做法如下所示[^4]: ```html <template> <div id="app"> <nav> <!-- 添加两个简单的路由链接 --> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </nav> <!-- 路由出口;匹配到的组件将渲染在这里 --> <router-view></router-view> </div> </template> ``` #### 开发服务器启动 最后一步就是让本地开发服务器跑起来以便实时测试更改效果。执行下面这条指令即可开启服务端监听模式: ```bash npm run serve # 或者 yarn serve ``` 此时浏览器应该会在默认地址打开应用程序界面,通常是 http://localhost:8080/ 。这样就完成了整个基础流程的学习[^3]! ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值