如何配置Vue环境

119 阅读2分钟

前言,我们在真正开发企业级项目的时候,是要会脚手架或者工程化等一系列去配置我们的项目,工程化就依赖nodejs去安装

安装nodejs(建议安装14以上的版本,稳定)去官网我们可以看见有个长期支持版本,建议不要安装最新版本,不稳定

安装完之后就可以使用 npm指令了,可以在终端输入npm -v来检查是否安装成功

Snipaste_2023-06-01_15-20-24.png

接下来创建Vue项目,创建项目就可以使用npm init,有两种方式,

一种是使用vite去安装,输入npm init vite@latest; @latest就是说选择最新版本,接下来就会显示

  • Project name 定义项目名称,按回车确认

显示选择你要安装什么框架,我们选择Vue,加入TypeScript,这样就创建好了

Snipaste_2023-06-01_15-33-03.png

Snipaste_2023-06-01_15-36-16.png

把项目拖到VsCode中,打开终端,首先我们要安装依赖,执行一下npm install或者npm i,他会去扫描package.json存在的依赖去安装,安装完会出现node_modules文件夹,这就显示已经安装好了;

  • 打开package.json文件,里面有三个启动命令

Snipaste_2023-06-01_15-42-38.png

  • dev 启动指令
  • build 打包指令
  • preview 预览生产环境的命令

我们是用vite创建的项目,输入npm run dev 去启动,会发现非常快就启动好了,可以试一下

第二中就是使用Vue脚手架去创建,输入指令npm init vue@latest,这个会比vite的配置多一点,下面一一说明

  • Project name 定义项目名称,按回车确认
  • Add TypeScript? » 是否要安装ts
  • Add JSX Support? » 是否支持jsx
  • Add Vue Router for Single Page Application development? 是否安装router
  • Add Pinia for state management? 是否安装pinia(类型与vuex)
  • Add Vitest for Unit Testing? 是否要这个vue单测工具vitest
  • Add an End-to-End Testing Solution? » 是否要这个自动化测试
  • Add ESLint for code quality? 是否要esLint
  • Add Prettier for code formatting? 是否要这个代码格式化工具

大概就是这么多东西,两种方式都可以,第二种配置的比较全一点,之后也是先安装依赖,这次安装依赖比较多,安装时间也会长一点,启动项目的指令还是一样,