VSCode配置启动Vue项目

青旅半醒 2023-07-14 05:48 20阅读 0赞

**注意：这个是1.2版本的配置，现在1.3版配置已经不是这样了**

**下载安装并配置VSCode**

随便百度上搜个最新的VSCode安装好后，点击Ctrl + Shit + X打开插件扩展窗口进行插件扩展，这里要安装两个插件。

1、vetur插件的安装

该插件是vue文件基本语法的高亮插件，在插件窗口中输入vetur点击安装插件就行，装好后点击文件->首选项->设置 打开设置界面，在设置界面右侧添加配置

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

2、eslint插件的安装

eslint智能错误检测插件，在具体开发中作用很大，能够及时的帮我们发现错误。至于安装，同样打开插件扩展窗口输入eslint点击安装插件，装好后也需要进行配置，在同vetur插件一样的地方进行配置

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

vetur和eslint插件在配置中如下图所示   
![这里写图片描述][SouthEast]

**导入项目并编译**

1、导入项目

从github上下载vuestic-admin项目（[https://github.com/epicmaxco/vuestic-admin.git][https_github.com_epicmaxco_vuestic-admin.git]）,拉到本地后打开VSCode直接文件->打开文件夹 导入项目，Ctrl+shift+Y呼出控制台，在控制台终端输入npm install添加包依赖   
![这里写图片描述][SouthEast 1]  
如果没有安装npm请先安装npm。

2、运行项目

同样在终于执行npm run dev代表开始运行项目，这条命令会自动在浏览器上运行项目，运行结果如下图所示，代表配置成功了。   
![这里写图片描述][SouthEast 2]

*      <li class="tool-item tool-active is-like "><a href="javascript:;"><svg class="icon" aria-hidden="true">
                                <use xlink:href="#csdnc-thumbsup"></use>
                            </svg><span class="name">点赞</span>
                            <span class="count">7</span>
                            </a></li>
                            <li class="tool-item tool-active is-collection "><a href="javascript:;" data-report-click="{"mod":"popu_824"}"><svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-csdnc-Collection-G"></use>
                            </svg><span class="name">收藏</span></a></li>
                            <li class="tool-item tool-active is-share"><a href="javascript:;" data-report-click="{"mod":"1582594662_002"}"><svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-csdnc-fenxiang"></use>
                            </svg>分享</a></li>
                            
                                                    
                                                    <li class="tool-item tool-more">
                                <a>
                                <svg t="1575545411852" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5717" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M179.176 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5718"></path><path d="M509.684 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5719"></path><path d="M846.175 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5720"></path></svg>
                                </a>
                                <ul class="more-box">
                                    <li class="item"><a class="article-report">文章举报</a></li>
                                </ul>
                            </li>
                                                </ul>
                    </div>
                                    <div class="right-toolbox"><a href="https://blog.csdn.net/Yoryky/article/details/78290443" target="_blank" class="jump-net-article">
                    <svg t="1575545252354" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5597" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M243.9 1022.2c-62.3 0-124-23.8-171.5-70.8C26.4 905.5 1.5 845 1.5 779.9s24.9-125.6 70.8-171.5l184-184.1c45.9-45.9 106.4-70.8 171.5-70.8s125.6 24.9 171.5 70.8c18.1 18.1 18.1 47 0 65.1s-47 18.1-65.1 0c-28.3-28.3-65.7-43.5-105.9-43.5s-78.1 15.3-105.9 43.7l-184 184c-58.3 58.3-58.3 153.4 0 212.3 28.3 28.3 65.7 43.5 105.9 43.5s78.1-15.3 105.9-43.5l184-184c18.1-18.1 47-18.1 65.1 0 18.1 18.1 18.1 47 0 65.1l-184 184c-46.9 48-109.1 71.2-171.4 71.2z m523.7-423l184-184c94.5-94.5 94.5-248 0-342.5s-248-94.5-342.5 0l-184 184c-18.1 18.1-18.1 47 0 65.1s47 18.1 65.1 0l184-184c28.3-28.3 65.7-43.5 105.9-43.5s78.1 15.3 105.9 43.5c58.3 58.3 58.3 153.4 0 212.3l-184 184c-58.3 58.3-153.4 58.3-212.3 0-18.1-18.1-47-18.1-65.1 0-18.1 18.1-18.1 47 0 65.1 47 47 109.3 70.8 171.5 70.8s123.9-23.2 171.5-70.8z" p-id="5598"></path></svg>
                        站内首发文章</a></div>
                                </div>
                <div class="person-messagebox">
                    <div class="left-message"><a href="https://blog.csdn.net/ywl570717586">
                        <img src="https://profile.csdnimg.cn/2/A/9/3_ywl570717586" class="avatar_pic" username="ywl570717586">
                                                <img src="https://g.csdnimg.cn/static/user-reg-year/2x/5.png" class="user-years">
                                        </a></div>
                    <div class="middle-message">
                                            <div class="title"><span class="tit"><a href="https://blog.csdn.net/ywl570717586" data-report-click="{"mod":"popu_379"}" target="_blank">ywltoread</a></span>
                                                </div>
                        <div class="text"><span>发布了81 篇原创文章</span> · <span>获赞 105</span> · <span>访问量 68万+</span></div>
                    </div>
                                    <div class="right-message">
                                                <a href="https://bbs.csdn.net/topics/395532438" target="_blank" class="btn btn-sm btn-red-hollow bt-button personal-messageboard">他的留言板
                            </a>
                                                                <a class="btn btn-sm  bt-button personal-watch" data-report-click="{"mod":"popu_379"}">关注</a>
                                        </div>
                                </div>
                        </div>

[SouthEast]: /images/20230529/8d421a39ddbc4d4886632c2c694f109f.png
[https_github.com_epicmaxco_vuestic-admin.git]: https://github.com/epicmaxco/vuestic-admin.git
[SouthEast 1]: /images/20230529/675fbe93579b4b06837897c0a87f7a1f.png
[SouthEast 2]: /images/20230529/8e20bf7ecbc04240bb18d2de5bceaadc.png