Vue脚手架搭建及vue项目创建

Vue脚手架搭建及vue项目创建

一、引言

Vue.js 是一个构建用户界面的渐进式框架，非常适合用来创建单页面应用（SPA）。Vue CLI 是 Vue.js 官方提供的命令行工具，它提供了项目脚手架、开发服务器、代码打包和部署等一系列功能，极大地简化了 Vue.js 项目的搭建和开发流程。

二、环境搭建

1、安装 Node.js 和 npm

确保你的系统上已经安装了 Node.js 和 npm。可以通过在命令行中输入 node -v 和 npm -v 来检查是否已安装以及版本号。

2、安装 Vue CLI

2.1、切换 npm 镜像源

为了加速 npm 包的下载，建议切换到国内的镜像源，例如淘宝镜像：

npm config set registry https://registry.npm.taobao.org

2.2、全局安装 Vue CLI

使用 npm 或 yarn 全局安装 Vue CLI：

# 使用 npm
npm install -g @vue/cli

# 使用 yarn
yarn global add @vue/cli

完成后可以通过vue查看是否安装成功，一般情况下，安装成功后会自己配置好环境变量，如果没有配置好，则需要读者自行百度，或者在我的评论区留言

三、创建 Vue 项目

1、创建项目目录

在命令行中进入到你想要创建项目的目录，或者使用命令创建一个新的目录：

mkdir vue_project && cd vue_project

2、使用 Vue CLI 创建项目

Vue CLI 提供了多种预设配置，你可以选择一个来快速创建项目：

vue create my-vue-app

根据提示选择需要的配置，例如 Babel、ESLint 等。

3、安装项目依赖

创建项目后，进入项目目录并安装依赖：

# 使用 npm
npm install

# 使用 yarn
yarn install

4、运行项目

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

# 使用 npm
npm run serve

# 使用 yarn
yarn serve

访问 http://localhost:8080，你将看到 Vue CLI 创建的项目欢迎页面。

四、项目结构与运行流程

1、项目目录结构

一个典型的 Vue CLI 创建的项目目录结构如下：

• src/：存放主要的源码文件。
• public/：存放静态资源文件，如 index.html。
• node_modules/：存放项目依赖。
• package.json：定义项目信息和依赖。

2、运行流程

Vue CLI 通过 main.js 将 App.vue 渲染到 index.html 的指定区域中。App.vue 包含模板、脚本和样式，是应用的入口组件。

五、总结

Vue CLI 是一个强大的工具，它简化了 Vue.js 项目的搭建和开发流程。通过几个简单的命令，我们可以快速创建一个功能完备的 Vue.js 项目，并开始开发。随着项目的深入，你还可以探索更多的 Vue CLI 功能和插件，以满足不同的开发需求。

---

版权声明：本博客内容为原创，转载请保留原文链接及作者信息。

参考文章：

• VUE快速入门手册——安装VUE脚手架（创建自己的第一个vue项目）
• Vue脚手架搭建及vue项目创建【详细教程】