Vue3工程搭建流程
赵美*
web前端;vue3;npm;node.js;vue3项目搭建;
项目描述
这篇文章主要介绍了vue3.0 项目搭建和启动流程，帮助大家更好的学习使用vue框架，感兴趣的朋友可以了解下
上传时间
2023.06.24
浏览人数
315人
赵美*
未知
Hot:2163
一、简介
Vue是一套用于构建用户界面的 渐进式 JavaScript框架，它采用了一种类似于响应式编程的方法，允许我们通过声明式渲染数据来构建用户界面。Vue.js可以进行组件化开发，使代码编写量大大减少，目前是国内主流框架之一。
二、搭建准备
1. 准备条件 :
确保你安装了最新版本的 Node.js 。
2. 检查 Node 版本 ：
打开 cmd 输入 node -V 检查一下我们是否安装成功。如果出现 V+ 数字 的形式,说明安装成功。
三、搭建
1. 配置 npm 国内镜像 ：
由于 npm 是国外的，使用起来比较慢；我们可以使用淘宝的 cnpm 镜像来安装 vue 。安装好了 node.js，就安装了npm。然后再利用 npm 安装淘宝镜像的cnpm。
（这里用的是WebStom编辑器）打开 Terminal 输入下面的指令
npm config set registry https://registry.npm.taobao.org
2. 安装 vue 最新脚手架 ：
3. 检查 vue 版本 ：
打开 cmd 输入 vue -V 检查一下我们是否安装成功。如果出现 @vue/cli + 数字 的形式，说明安装成功。
4. 创建项目 ：
vue create 【项目名】（注意：项目名称字母小写，大写会报错）
5. 手动设置 （根据自己需求配置）：
方向键移动，这里选择 Manually select features 手动选择功能，Enter 键下一步 。
空格 键选中我们需要的配置选项，Enter 键下一步 。
选择 3.x 版本 。
Use history mode for router? 路由器使用历史记录模式? 项目需要什么特性就选什么，这里选 n ， Enter 键下一 步 。
选择 Sass / SCSS ( with dart-sass ) 。
选择 ESLint with error prevention only 。
选择 Lint on save 。
选择 In dedicated config files 。
Save this as a preset for future projects? 是否将其保存为将来项目的预设？y 或 n 看个人需求 这里选择 y 。
Save preset as : 将预设另存为 ：，直接按 Enter 键下一步 。
四、启动
1. 进入项目目录 ：
2. 进入目录后，启动项目 ：
npm run serve
3. 出现 DONE Compiled successfully 表示项目启动成功啦 ！
到此，这篇关于 vue 脚手架项目创建步骤详解的文章就介绍到这了！
赵美*
