手动搭建Vue步骤
1.确保Vue所需环境已搭好
![](https://i-blog.csdnimg.cn/direct/00eeadcb79d74253852199dffb75e28b.png)
2.创建Vue项目
2.1.进入项目目录,使用vue create xxx
命令创建vue项目,这里选择第三项,自己手动配置
![](https://i-blog.csdnimg.cn/direct/e1b1e77647374482ab2e7788316ea7b9.png)
2.2.根据自己所需功能选择(上下键移动指标,空格键选择,回车键提交),这里选择加上Router、Vuex(也可以暂时不加,后面在自己手动添加)
![](https://i-blog.csdnimg.cn/direct/b44eb4cfb9b1471fb64efdc19f968020.png)
2.3.进入vue版本选择,这里选择vue3
![](https://i-blog.csdnimg.cn/direct/cf13c65010674b418a7cce693b82aad0.png)
2.4.是否将该创建项目作为新模板,输入n
,回车
2.5.选择一个过滤器/格式化器配置,第一个选择只有防错误功能
,即代码检查。后面选择则是在这基础上增加Airbnb
、Standard
等配置,这里选择第一项即可
![](https://i-blog.csdnimg.cn/direct/1420d1dedfca40f7844c664dd12027c3.png)
2.6.选择额外的lint功能,这里不使用Git,所以只选择第一项,保存文件时运行lint工具检查代码
2.7.你喜欢把Babel, ESLint等的配置放在哪里?这里选择第一项,单独创建文件
![](https://i-blog.csdnimg.cn/direct/271b94082ecb45ccb206d537b888e950.png)
2.8.将其保存为未来项目的预设?这里我选择N,菜就多练~(PS:正常公司项目也不会频繁的让你手动创建项目,都是使用现成的项目)
![](https://i-blog.csdnimg.cn/direct/4fa2965867c448eca4f173b80b9002b4.png)
2.9.出现如下画面,项目可以算是成功(因为有npm fund
的出现,项目可能会出现部分依赖下载失败的情况,后面再处理,如果没有npm fund
提示,那就没问题)
![](https://i-blog.csdnimg.cn/direct/a86aa45a73da451d818e4195fe3506e5.png)
项目目录下多了shop_system_vue
项目文件
![](https://i-blog.csdnimg.cn/direct/e84d26dd1d934cab863002a6fd83a317.png)
2.10.根据提示命令,启动项目
![](https://i-blog.csdnimg.cn/direct/dc5d5e407d424f0583a4fc026d2b7b47.png)
运行后,出现下方信息则代表项目以运行
![](https://i-blog.csdnimg.cn/direct/cee1bba57c91418ca3fb22686788a776.png)
浏览器输入提供的访问位置,出现下方vue界面,则表示项目运行成功
![](https://i-blog.csdnimg.cn/direct/72cdc567a709436aa6ab08e1df8001db.png)
按Ctrl
+c,可终止项目运行
![](https://i-blog.csdnimg.cn/direct/8dc3cf4d47324bea98aa504df10bf4f1.png)