vue开发前的准备工作(保姆教学)

92 阅读1分钟

安装vue工具

vue cli 是vue.js开发的标准工具,vue cli 是一个基于vue.js进行快速开发的完整系统

npm install -g @vue/cli

安装之后,你就可以在命令行中访问vue的指令,首先我们可以运行如下的命令看看它是否安装成功

vue --version

image.png

创建一个项目

运行以下指令来创建一个新的项目

vue create  vue-demo

温馨提示:

  • vue-demo只是一个测试名,可以随意进行修改
  • 在控制台中,可以使用上下按键调整选择项
  • 在控制台中,可以使用空格来选中和取消选中

可以选择默认的项目模板,就是下面图中的前两个,或者手动选择特性来选取我们需要的特征,在实际开发都选择第三个 image.png

对于初学者我们先选择这两个,不要选择Linter/Formatter,以避免不必要的错误提示,那这个是什么呢? 这个是代码的规范化 image.png 版本这里我们选择3.x

微信图片_20230410204420.png 刚开始的同学可能不明白这个是什么,这个是问我们的配置放到哪里? in dedicated config files 专用配置文件或者 in package.json 在package.json文件,这里我们选择第一个 image.png 将其保存为未来项目的预置?,选择 N 不保存 image.png 稍等片刻当我们看到如下的代表我们项目已经常见成功了

image.png

运行项目

第一步:进入项目的跟目录 cd vue-demo

第二步:运行npm run serve启动项目

安装vue高亮插件

vscode 中安装volar插件