前端笔记1-创建vue项目

文章目录

前言

简单记录下使用vue开发项目的内容

一、创建项目

创建vue项目的方式：vue-cli、基于vite创建。

1.基于vue-cli脚手架

该脚手架基于webpack创建vue3的工程项目。

(1).安装vue-cli

npm install -g @vue/cli

安装成功后可使用'vue --version'指令验证是否安装成功，如下图所示。

(2).创建项目

提供两种创建方式：

#创建方式一：基于命令行方式创建
vue create my-project
#创建方式二：基于可视化面板创建
vue ui

A.基于UI界面创建项目

在控制台输入'vue ui'，打开浏览器，输入‘http://localhost:8000/’，可打开vue项目管理器，在该页面可实现项目的创建和管理。

​

​

B.基于控制台创建项目

在使用vue-cli创建vue项目时，个人比较习惯使用这种方式。

# 第一步，执行创建项目指令
# my-project 为创建的项目名称
vue create my-project 
# 第二步。选择项目预设
# 选择项目预设，选择 Manually select features ，手动选择功能
Failed to check for updates
? Please pick a preset: 
  Default ([Vue 3] babel, eslint) 
  Default ([Vue 2] babel, eslint) 
> Manually select features 
# 第三步，选择项目所需功能，空格表示选择
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing
# 第四步，选择vue版本
? Check the features needed for your project: Babel, TS, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 3.x 
  2.x 
# 第五步，选择配置
 Choose a version of Vue.js that you want to start the project with 3.x
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
  ESLint + Prettier 
# 第六步，额外功能
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
>(*) Lint on save
 ( ) Lint and fix on commit
# 第七步，选择配置信息存放文件
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files 
  In package.json 
# 第八步，选择是否保存配置为预设
? Save this as a preset for future projects? (y/N) y
#第九步，输入预设名称
? Save this as a preset for future projects? Yes
? Save preset as: 
# 等待项目创建完成

vue-cli官网地址： Creating a Project | Vue CLI

2.基于vite创建（官方推荐）

vue官方文档地址 https://cn.vuejs.org/guide/quick-start.html

# 创建vue项目
npm create vue@latest
# 输入项目名
✔ Project name: … <your-project-name>
# 是否添加TS环境
✔ Add TypeScript? … No / Yes
# 是否添加jsx支持
✔ Add JSX Support? … No / Yes
# 是否添加路由
✔ Add Vue Router for Single Page Application development? … No / Yes
# 是否添加状态管理
✔ Add Pinia for state management? … No / Yes
# 是否添加单元测试
✔ Add Vitest for Unit testing? … No / Yes
# 是否添加端到端测试
✔ Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
# 是否添加ESLint语法检查
✔ Add ESLint for code quality? … No / Yes
# 是否Prettier格式工具
✔ Add Prettier for code formatting? … No / Yes
# 是否添加扩展调试
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

执行完以上任务，会创建好vue项目。

初始化vue项目

# 进入vue项目目录
cd project
# 安装项目依赖
npm install
# 启动项目
npm run dev

打开浏览器输入网址：http://localhost:5173/，即可打开一个页面。自此，一个基本的vue项目就创建好了。

二、基本环境：node.js 安装

1、下载

下载地址： Node.js — Run JavaScript Everywhere

选择版本

点击下载

2、安装

运行下载下来的文件，按照提示进行安装即可。

三、node版本管理工具：nvm

在实际开发中，不同的项目可能需要不同的node版本，可以使用nvm进行管理，非常方便。

ps:安装nvm时，建议卸载node

1、下载

下载地址：https://github.com/coreybutler/nvm-windows/releases

2、安装

运行下载下来的文件，按照提示进行安装即可。

3、使用

# 看安装的所有node.js的版本
nvm ls         
# 或者 nvm list
# 查看可以安装的node版本
nvm list available
# 安装node
nvm install 版本号
#卸载node
nvm uninstall 版本号 
# 切换node版本
nvm use 版本号
# 显示当前版本
nvm current
#查看nvm版本
nvm version

四、镜像源管理工具：nrm

国内在使用npm安装项目依赖时，可能因外网络原因，需要将npm的镜像源改为国内的，比如淘宝源、阿里源等。频繁配置会比较麻烦，可以使用nrm对npm源进行管理。

1、安装

# 执行安装指令
npm install nrm -g

2、使用

# 查看是否安装成功
nrm --version
# 查看可切换镜像源
nrm ls
# 查看当前使用源
nrm current
# 切换镜像源
nrm use 镜像源名称
# 测试镜像源响应速度
nrm test <registry名称>
# 添加源
nrm add <registry名称> <url镜像源地址>
# 删除源
nrm del <registry名称>

总结

本篇内容主要是记录创建vue项目的大概方式，希望能通过记录，累积知识。

编程是一场思维的马拉松，而不是短跑。相信大家都听过一句话，“种一棵树最好的时间是十年前，其次是现在”，望与诸君共勉。