在vscode中创建vue项目

我不是女神ヾ 2023-10-03 20:03 1阅读 0赞

#### 1. 背景 ####

昨天对一次成功用新电脑在vscode上跑成功项目工程里的vue项目，今天目标是自己用vscode新建一个vue项目  
关于vue环境配置请看这篇：[使用vscode运行Vue项目][vscode_Vue]

#### 2. 准备工作（也可跳过此步骤） ####

1.  安装Vetur，一款Vue代码高亮显示的一款插件。  
    ![在这里插入图片描述][dfa7c07c39694941b387df0c4f77919f.png]
2.  安装eslint代码规范插件。  
    ![在这里插入图片描述][c3f1dc617ad24955bcbd0a1ce94570cf.png]
3.  配置Vscode工作环境  
    装好后点击文件->首选项->设置 打开设置界面，在设置界面右侧添加配置。点击“在settings.json中编辑”，进入代码编辑界面。  
    ![在这里插入图片描述][05c0e44992f2453c9067472bf7588bd6.png]  
    输入Vetur文档代码：

{
        
        "emmet.syntaxProfiles": {
        
               "vue-html": "html",
               "vue": "html"
           },
    }

同理eslint：  
![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ywpgp2KW-1662012150376)(https://imgblog.csdnimg.cn/d862ef2cb37743da8d0ba7df735ed61e.png)\]][img-ywpgp2KW-1662012150376_https_imgblog.csdnimg.cn_d862ef2cb37743da8d0ba7df735ed61e.png]

输入eslint文档代码：

{
        
       "eslint.validate": [
            "javascript",
            "javascriptreact",
            "html",
            "vue"
        ],
     
        "eslint.options": {
        
            "plugins":["html"]
        }
    }

#### 3. 过程 ####

第一步：打开vscode, 选择 文件 >> 打开文件夹 选择要创建项目的文件目录。  
第二步：在“终端”中输入：**vue init webpack projectName**，其中projectName可以自行修改。（**注意：项目名称不能有大写）**  
如果你在这步出现如下报错，请看这篇：[vue : 无法加载文件 C:\\Users\\UIDQ5637\\AppData\\Roaming\\npm\\vue.ps1，因为在此系统上禁止运行脚本][vue _ _ C_Users_UIDQ5637_AppData_Roaming_npm_vue.ps1]![在这里插入图片描述][adcd1af085e34b3fbf4036a7e84081f5.png]第三步：在下面步骤中，一些需要填写或选择的选项，我都直接Enter了，一些需要安装的我都直接No了。  
![在这里插入图片描述][78a140efcf6e40d498b4bde1895ae391.png]  
![在这里插入图片描述][3ff7da7371a44dc88490f7666ce5c585.png]

第四步：按照上图提示进入到项目目录并运行项目  
![在这里插入图片描述][f02f590f9519456289abf252eafbd6f1.png]  
第五步：在浏览器输入http://localhost:8080就可以打开项目了  
![在这里插入图片描述][9be59e871749445caf3729d23fc41c74.png]

[vscode_Vue]: https://blog.csdn.net/someday____/article/details/126623381?spm=1001.2014.3001.5501
[dfa7c07c39694941b387df0c4f77919f.png]: https://img-blog.csdnimg.cn/dfa7c07c39694941b387df0c4f77919f.png
[c3f1dc617ad24955bcbd0a1ce94570cf.png]: https://img-blog.csdnimg.cn/c3f1dc617ad24955bcbd0a1ce94570cf.png
[05c0e44992f2453c9067472bf7588bd6.png]: https://img-blog.csdnimg.cn/05c0e44992f2453c9067472bf7588bd6.png
[img-ywpgp2KW-1662012150376_https_imgblog.csdnimg.cn_d862ef2cb37743da8d0ba7df735ed61e.png]: https://img-blog.csdnimg.cn/7f77266a22a24cce8dad818d9995fb24.png
[vue _ _ C_Users_UIDQ5637_AppData_Roaming_npm_vue.ps1]: https://blog.csdn.net/someday____/article/details/126639023?spm=1001.2014.3001.5501
[adcd1af085e34b3fbf4036a7e84081f5.png]: https://img-blog.csdnimg.cn/adcd1af085e34b3fbf4036a7e84081f5.png
[78a140efcf6e40d498b4bde1895ae391.png]: https://img-blog.csdnimg.cn/78a140efcf6e40d498b4bde1895ae391.png
[3ff7da7371a44dc88490f7666ce5c585.png]: https://img-blog.csdnimg.cn/3ff7da7371a44dc88490f7666ce5c585.png
[f02f590f9519456289abf252eafbd6f1.png]: https://img-blog.csdnimg.cn/f02f590f9519456289abf252eafbd6f1.png
[9be59e871749445caf3729d23fc41c74.png]: https://img-blog.csdnimg.cn/9be59e871749445caf3729d23fc41c74.png