1 创建VUE3 + VITE 项目

本文指导如何安装Node.js和Yarn,解决Yarn可能遇到的问题,以及创建Vue3+Vite项目的详细步骤,包括设置执行策略和项目初始化过程。
摘要由CSDN通过智能技术生成

目录

安装管理工具

安装 node 

安装 yarn 

使用yarn过程中出现问题及解决方法

创建 Vue 3 + Vite  项目


安装管理工具

安装 node 

下载node 安装即可 node下载链接 

安装 yarn 

使用npm pnpm yarn 都可以,当下使用yarn,那么先安装yarn 

npm i yarn

使用yarn过程中出现问题及解决方法

注意这里后期如果出现 一下问题

yarn : 无法加载文件 C:\Users\xxxx\AppData\Roaming\npm\yarn.ps1

你可以尝试以下解决方案来解决该问题:

  1. 打开 PowerShell 作为管理员。在开始菜单中找到 PowerShell,并右键单击它,然后选择 "以管理员身份运行"。

  2. 在管理员模式下,运行以下命令来修改 PowerShell 的执行策略: 

    Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
    
  3. 当系统提示你确认更改时,输入 Y 并按下回车键,一般直接运行即可。

  4. 现在,尝试再次运行 yarn 命令,看看问题是否已解决

创建 Vue 3 + Vite  项目

要创建一个 Vue 3 + Vite 项目,你可以按照以下步骤进行操作:

1. 确保你已经安装了 Node.js。你可以在终端中运行以下命令来检查是否已安装 Node.js:

   node -v

 2. 安装 vite。在终端中运行以下命令来安装 任选一个均可:

yarn create vite 

npm init vite@latest
pnpm create vite

 3. 创建新的 Vue 3 项目。输入名称:

4. 按上下方向键,再按回车选择vue。

5. 在接下来的选项中,使用上下箭头键来选择以下选项 这里选择JS/TS 按需求来即可:

6. 当你完成选择后,按回车键继续。

7. 然后cd进入到项目目录,输入yarn 或者 npm install,安装默认的依赖。

 yarn  或者 npm install

8. 等待依赖安装完成后,输入启动命令:npm run dev 启动项目,将链接复制到浏览器打开,就能看到新建的项目了。

打开浏览器访问如下

现在你已经创建了一个 Vue 3 + Vite   项目,并可以开始开发你的应用程序了 

创建Vue 3 Vite项目可以按照以下步骤进行: 1. 安装Vite: Vite是一个基于Vue 3单文件组件的非打包开发服务器,它可以提供快速的本地开发启动。你可以使用以下命令全局安装Vite: ``` npm install -g create-vite ``` 2. 创建项目: 使用create-vite命令创建一个Vue 3项目。在命令行中执行以下命令: ``` create-vite my-vue3-project --template vue-ts ``` 这将创建一个名为my-vue3-project的文件夹,并使用Vue TypeScript模板初始化项目。 3. 进入项目文件夹: 使用cd命令进入项目文件夹: ``` cd my-vue3-project ``` 4. 安装依赖: 在项目文件夹中执行以下命令安装项目所需的依赖: ``` npm install ``` 5. 启动开发服务器: 执行以下命令启动Vite开发服务器: ``` npm run dev ``` 现在,你的Vue 3 Vite项目已经创建成功,并且开发服务器已经启动。你可以通过访问http://localhost:3000来查看你的项目。 引用中提到了创建Vue 3 Vite项目所需的技术栈,包括vue3、ts、vitevue-router、element-plus和pinia。这些技术栈可以帮助你更方便地开发Vue 3项目。 引用中提到了选择Vite而不是vue-cli的原因,Vite可以提供本地快速开发启动,并且不需要打包,可以加快开发效率。 引用中给出了在使用Vue 3时可能遇到的一些问题和解决方法,比如在使用插件时需要禁用Vetur并安装Vue Language Features (Volar)插件,以及解决找不到模块或其相应类型声明的问题。 引用中给出了一个示例的vite.config.ts配置文件,这个文件可以用来配置Vite项目,包括设置路径别名等。 希望以上信息对你创建Vue 3 Vite项目有所帮助!<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值