前言,我们在真正开发企业级项目的时候,是要会脚手架或者工程化等一系列去配置我们的项目,工程化就依赖nodejs去安装
安装nodejs(建议安装14以上的版本,稳定)去官网我们可以看见有个长期支持版本,建议不要安装最新版本,不稳定
安装完之后就可以使用 npm指令了,可以在终端输入npm -v来检查是否安装成功
接下来创建Vue项目,创建项目就可以使用npm init,有两种方式,
一种是使用vite去安装,输入npm init vite@latest; @latest就是说选择最新版本,接下来就会显示
- Project name 定义项目名称,按回车确认
显示选择你要安装什么框架,我们选择Vue,加入TypeScript,这样就创建好了
把项目拖到VsCode中,打开终端,首先我们要安装依赖,执行一下npm install或者npm i,他会去扫描package.json存在的依赖去安装,安装完会出现node_modules文件夹,这就显示已经安装好了;
- 打开package.json文件,里面有三个启动命令
- 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? 是否要这个代码格式化工具
大概就是这么多东西,两种方式都可以,第二种配置的比较全一点,之后也是先安装依赖,这次安装依赖比较多,安装时间也会长一点,启动项目的指令还是一样,