2023年10月13日

1. 安装vue脚手架以及出现的问题总结

安装命令:npm i -g @vue/cli 通过命令vue create test初始化vue项目出现报错: Snipaste_2023-10-13_23-17-53.png

解决方案:

  • 通过npm config get prefix 查看文件夹nodejs\node_global的具体位置
  • 在电脑环境变量中配置刚刚得出的路径

补充:脚手架的概念

  • 脚手架是建筑工程中的概念,在vue项目开发中,他是帮助我们搭建项目的工具。
  • Vue CLI
    • CLI:Command-Line Interface,即命令行界面;
    • 他已经内置了webpack相关的配置,不需要配置;
  • 安装命令:npm i -g @vue/cli

2、常见cd命令

  • 进入d盘 D:
  • cd.. 跳转到上一层目录
  • cd \ 跳转到硬盘的根目录
  • cd C:\WINDOWS // 跳转到当前硬盘的其他文件
  • cd /d e:\software //跳转到其他硬盘的其他文件夹,注意此处必须加/d参数。否则无法跳转。

3、vue项目在vue.config.js中进行别名配置(修改配置文件需要重新启动项目)

Snipaste_2023-10-13_23-43-23.png

4、jsconfig.json文件的作用之一:在项目开发引入路径的时候,使vscode有更友好的代码提示

Snipaste_2023-10-14_07-30-20.png

Snipaste_2023-10-14_07-33-16.png

5、vue项目目录之vue.config.js文件的理解

他是vue提供的配置文件,可在里面进行自定义配置,能将默认的webpack配置文件webpack.config.js相同的配置覆盖掉。

6、创建vue项目之vite

  • 通过命令npm init vue@latest安装本地工具:create-vue
  • 使用create-vue创建一个vue项目
  • 这种方式创建的项目基于vite进行打包,而脚手架创建的项目基于webpack