vue创建工程教程

目录

引言

前提条件

开始使用

方式一：创建新项目（不推荐）

创建完成

​编辑

进入项目目录

​编辑

启动开发服务器

启动效果

方式二：Vite 是一种新型的前端构建工具，提供了更快的开发服务器启动时间和热更新速度。

创建 Vite 项目

​编辑

进入项目目录

安装依赖

​编辑

启动开发服务器

启动效果

后续启动

配置编辑器

---

引言

Vue.js，作为一款轻量级的JavaScript框架，因其简单易用、灵活性强和性能优越而受到了广大前端开发者的喜爱。自从Vue 2.0发布以来，它逐渐成为了构建用户界面的首选之一。如今，随着Vue 3.0的推出，其特性和性能得到了进一步的增强。本文将分享我在使用Vue进行项目开发过程中的心得体会，涵盖从初学者到进阶开发者可能遇到的问题及解决方案。

前提条件

安装好了node.js和vue

安装有VScode(软件免费的)

开始使用

以管理员身份打开cmd(防止后面因权限不够无法创建)

方式一：创建新项目（不推荐）

在命令行工具中导航到您希望创建项目的目录，然后运行以下命令来创建一个新的Vue项目：

vue create my-vue-app

my-vue-app 是项目的名称，您可以根据需要更改。

• 选择预设:
  • 运行上述命令后，CLI会询问您是否要使用默认预设还是手动选择特性。如果您是初学者，可以选择默认预设，它将包含基本配置。
  • 如果您想要更自定义的设置，可以手动选择特性，比如选择是否添加TypeScript支持、路由管理（Vue Router）、状态管理（Vuex）等。

创建完成

进入项目目录

创建完成后，根据提示进入新创建的项目文件夹：

cd first

启动开发服务器

在项目文件夹内，运行以下命令来启动开发服务器：

npm run serve

这将会编译项目并在本地启动一个热重载的开发服务器，默认情况下可以在浏览器中通过 http://localhost:8080 访问应用。如果端口被占用，可能会自动选择其他可用端口。

启动效果

方式二：Vite 是一种新型的前端构建工具，提供了更快的开发服务器启动时间和热更新速度。

创建 Vite 项目

在命令行工具中导航到您希望创建项目的目录，然后执行以下命令来创建一个新的Vite项目：

npm create vite@latest my-vue-app --template vue

推荐使用使用国内镜像下载速度快

cnpm create vite@latest my-vue-app --template vue

my-vue-app 是项目的名称，您可以根据需要更改；--template vue 指定了模板类型为Vue。

Ok to proceed? (y) 可以继续吗？选y继续

Select a framework: » - Use arrow-keys. Return to submit.

选择框架： » - 使用箭头键。返回提交。

我们就选择vue

光标按下选JavaScript

进入项目目录

创建完成后，进入新创建的项目文件夹：

cd my-vue-app

安装依赖

在项目文件夹内，运行以下命令来安装项目所需的依赖：

推荐使用使用国内镜像下载速度快

cnpm install

npm install

启动开发服务器

安装完成后，运行以下命令来启动开发服务器：

npm run dev

这将会启动Vite的开发服务器，默认情况下可以在浏览器中通过 http://localhost:3000 访问应用。如果端口被占用，可能会自动选择其他可用端口。

启动效果

注意这是创建了vue3的工程

后续启动

利用Vue 项目管理器，注意：vue3的项目是没法利用它添加插件的。

vue ui

将vue工程项目导入Vue 项目管理器

首先修改地址找到要导入的工程

注意：vue2工程是带标记的，vue3则没有

选择要导入的项目

点击导入文件夹进入这个界面

管理插件页面

点击任务->serve->运行就能启动项目->启动app就能启动项目

配置编辑器

为了提高开发效率，推荐使用Visual Studio Code (VS Code)作为代码编辑器，并安装一些常用的扩展，例如：

• Vetur: 提供Vue语法高亮、智能感知等功能。
• ESLint: 用于代码质量检查。
• Prettier: 用于代码格式化。