vscode下面开发vue.js项目

桃扇骨 2022-06-01 10:27 240阅读 0赞

**vscode下面开发vue.js项目**

想学习**分布式、微服务、JVM、多线程、架构、java、python**的童鞋，千万**不要**扫码，否则后果自负~

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoaXFpYW5nMDMxNg_size_16_color_FFFFFF_t_70][]

**1.首先用官方vue-cli脚手架创建一个vue的集成环境（不会的请阅读上一章节），目录如下：**

![157_method_get-resource_shareToken_7E63AFB9F65846368D2C9B2E39F47AB1_entryId_184067543][]

目录结构介绍请阅读博客：[https://www.jianshu.com/p/2769efeaa10a][https_www.jianshu.com_p_2769efeaa10a]

**2.然后在src下面的components目录（组件目录）下面新建一个Test.vue文件（文件首字母要大写）文件内容如下：**

![153_method_get-resource_shareToken_7E63AFB9F65846368D2C9B2E39F47AB1_entryId_184067543][]

**3.在router目录下面（路由跳转目录）下的index.js页面中添加，我们刚才添加的Test.vue页面的跳转路由。文件内如如下：**

![158_method_get-resource_shareToken_7E63AFB9F65846368D2C9B2E39F47AB1_entryId_184067543][]

**4.使用快捷键Ctrl+~键，就可以出现命令行输入页面。如下所示：**

![151_method_get-resource_shareToken_7E63AFB9F65846368D2C9B2E39F47AB1_entryId_184067543][]

**5.命令行中输入npm start 命令，如下所示：**

![154_method_get-resource_shareToken_7E63AFB9F65846368D2C9B2E39F47AB1_entryId_184067543][]

如果成功后就会出现如下图所示的信息：

![159_method_get-resource_shareToken_7E63AFB9F65846368D2C9B2E39F47AB1_entryId_184067543][]

想要停止的话可以输入快捷键**Ctrl+C**接可以停止项目了，如下所示：

![156_method_get-resource_shareToken_7E63AFB9F65846368D2C9B2E39F47AB1_entryId_184067543][]

根目录下面**package.json**文件是**npm**命令的集合文件，如下所示：

![152_method_get-resource_shareToken_7E63AFB9F65846368D2C9B2E39F47AB1_entryId_184067543][]

如果想要修改项目的端口地址的话，可以去**config**下面的**index.js**进行修改。如下所示：

![149_method_get-resource_shareToken_7E63AFB9F65846368D2C9B2E39F47AB1_entryId_184067543][]

**6.浏览器中输入项目的启动地址，看看是否配置成功。如下图所示：**

![150_method_get-resource_shareToken_7E63AFB9F65846368D2C9B2E39F47AB1_entryId_184067543][]

界面上要是看到我们项目编写的内容的话，就说明成功了。

**这边需要说一下的是：项目的全局vue名字叫做Vue.vue、启动js文件是main.js**

![155_method_get-resource_shareToken_7E63AFB9F65846368D2C9B2E39F47AB1_entryId_184067543][]

**如果大家对文章有什么问题或者疑意之类的，可以加我订阅号在上面留言，订阅号上面我会定期更新最新博客。如果嫌麻烦可以直接加我wechat：lzqcode**

![284_method_get-resource_shareToken_6CEF0002846344EAA8E81FC9E51F5C29_entryId_182345157][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoaXFpYW5nMDMxNg_size_16_color_FFFFFF_t_70]: /images/20220601/f99c0718954e47d2a97147adcc08f950.png
[157_method_get-resource_shareToken_7E63AFB9F65846368D2C9B2E39F47AB1_entryId_184067543]: https://note.youdao.com/yws/api/group/67516516/noteresource/8C87A78E0A3140B7B6111D5ADF1F2A32/version/157?method=get-resource&shareToken=7E63AFB9F65846368D2C9B2E39F47AB1&entryId=184067543
[https_www.jianshu.com_p_2769efeaa10a]: https://www.jianshu.com/p/2769efeaa10a
[153_method_get-resource_shareToken_7E63AFB9F65846368D2C9B2E39F47AB1_entryId_184067543]: https://note.youdao.com/yws/api/group/67516516/noteresource/D5425421168446B5ABC0A4D8DE5B9E69/version/153?method=get-resource&shareToken=7E63AFB9F65846368D2C9B2E39F47AB1&entryId=184067543
[158_method_get-resource_shareToken_7E63AFB9F65846368D2C9B2E39F47AB1_entryId_184067543]: https://note.youdao.com/yws/api/group/67516516/noteresource/14B6B6FCE8654C9BA7E880DC450D6F4E/version/158?method=get-resource&shareToken=7E63AFB9F65846368D2C9B2E39F47AB1&entryId=184067543
[151_method_get-resource_shareToken_7E63AFB9F65846368D2C9B2E39F47AB1_entryId_184067543]: https://note.youdao.com/yws/api/group/67516516/noteresource/6B18524BD31F4DB693A1150A548EB7BE/version/151?method=get-resource&shareToken=7E63AFB9F65846368D2C9B2E39F47AB1&entryId=184067543
[154_method_get-resource_shareToken_7E63AFB9F65846368D2C9B2E39F47AB1_entryId_184067543]: https://note.youdao.com/yws/api/group/67516516/noteresource/24EC5D8AD2A842C7AE3DD67C7AF256B7/version/154?method=get-resource&shareToken=7E63AFB9F65846368D2C9B2E39F47AB1&entryId=184067543
[159_method_get-resource_shareToken_7E63AFB9F65846368D2C9B2E39F47AB1_entryId_184067543]: https://note.youdao.com/yws/api/group/67516516/noteresource/76C1EE8647FA46F9AFB7A9D6E743D5CD/version/159?method=get-resource&shareToken=7E63AFB9F65846368D2C9B2E39F47AB1&entryId=184067543
[156_method_get-resource_shareToken_7E63AFB9F65846368D2C9B2E39F47AB1_entryId_184067543]: https://note.youdao.com/yws/api/group/67516516/noteresource/82C41276295F494299696A3CD86676F0/version/156?method=get-resource&shareToken=7E63AFB9F65846368D2C9B2E39F47AB1&entryId=184067543
[152_method_get-resource_shareToken_7E63AFB9F65846368D2C9B2E39F47AB1_entryId_184067543]: https://note.youdao.com/yws/api/group/67516516/noteresource/98C9CE0977B948E58367994DD4EB4CE0/version/152?method=get-resource&shareToken=7E63AFB9F65846368D2C9B2E39F47AB1&entryId=184067543
[149_method_get-resource_shareToken_7E63AFB9F65846368D2C9B2E39F47AB1_entryId_184067543]: https://note.youdao.com/yws/api/group/67516516/noteresource/01BD5A82B364473DA619390E568FC3F7/version/149?method=get-resource&shareToken=7E63AFB9F65846368D2C9B2E39F47AB1&entryId=184067543
[150_method_get-resource_shareToken_7E63AFB9F65846368D2C9B2E39F47AB1_entryId_184067543]: https://note.youdao.com/yws/api/group/67516516/noteresource/2DA5167D8D3F454286D8C68F54DD6504/version/150?method=get-resource&shareToken=7E63AFB9F65846368D2C9B2E39F47AB1&entryId=184067543
[155_method_get-resource_shareToken_7E63AFB9F65846368D2C9B2E39F47AB1_entryId_184067543]: https://note.youdao.com/yws/api/group/67516516/noteresource/3D3427AD93E34A228039069A27F752B0/version/155?method=get-resource&shareToken=7E63AFB9F65846368D2C9B2E39F47AB1&entryId=184067543
[284_method_get-resource_shareToken_6CEF0002846344EAA8E81FC9E51F5C29_entryId_182345157]: https://note.youdao.com/yws/api/group/67516516/noteresource/C5C7035B3E5147589191CE5096EC74CE/version/284?method=get-resource&shareToken=6CEF0002846344EAA8E81FC9E51F5C29&entryId=182345157