文章目录
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 功能和插件，以满足不同的开发需求。
版权声明：本博客内容为原创，转载请保留原文链接及作者信息。
参考文章：
标签：npm,vue,CLI,项目,创建,Vue,脚手架 From： https://blog.csdn.net/NiNg_1_234/article/details/142632970