一、安装环境:
1.默认Vscode、nodejs已经安装好了
2.全局安装vue-cli,vue-cli帮助我们快速构建Vue项目。
npm install -g @vue/cli
3.安装webpack (打包js的工具,vue3不需要了):npm install -g webpack
二、建项目:
1.开始创建vue项目,首先找一个用来存放项目的文件夹,打开系统cmd命令行窗口或打开vscode终端窗口输入下述命令:
npm init vue@latest
2.自己取一个项目名称输入进去,按enter继续
3.选取自己需要的组件,之后项目就创建成功了(下图的绿色字体就是运行项目的命令)
4.接着运行项目,先cd到项目文件夹(这里我的项目叫 my-paradise),cd my-paradise,然后输入以下指令。(这部可能会报错,解决方法在文章最下方)
npm install # 安装必要依赖
npm run dev # 运行项目
5.接着在浏览器里输入:http://localhost:5173(如上图系统给的链接,大家可能会有点不一样),看到如下vue页面就是成功啦。
6.项目打包发布上线
npm run build
完成之后,项目文件夹中会出现一个dist文件夹,里面就是打包之后的内容,直接部署就好了。
问题:如果是使用vue create创建的vue2项目,在npm run serve时可能会报错(关于eslint校验的错误或警告,如下图)
解决:注释掉这一行