一、环境安装与检查
- 首先,我们要确保我们安装了构建vue框架的环境,不会安装的请自行百度,有很多安装教程。
- 检查环境
-
node -v # 如果没有安装nodejs请安装,安装教程自行百度
vue -V # 没有安装,请执行 npm install -g @vue/cli
这些环境都安装了之后就可以进行vue项目的搭建了。
二、vue项目搭建
- 进入你要创建vue项目的目录下进行项目创建,输入:vue create “项目名称”, 例:
-
vue create project-app
选择 Manually select features 选项,进行自行配置
- 选择完这几个之后回车
-
选择 版本 3.x
第一个选项选择N,不要history mode for router,之后的选项都默认选择第一个,直接按回车键,直到来到这里选择是否记住上述的配置项,下次创建vue项目时还是按这种配置创建,这里我们选择N;
选择N之后,我们只要等待项目创建完成即可;下图表明已经创建完成。
三、编辑项目
我用的是VScode编辑器打开,可以看看项目文件的结构
在当前目录下启动项目:npm run serve
浏览器访问:http://127.0.0.1:8080
为了不会因为格式等问题而报错,我们需要在 vue.config.js 中添加 lintOnSave: false ,之后重新执行:npm run serve 重启项目,这样就不会出现格式问题的报错。
好了,vue3.X项目的创建就结束了。