记一次vue项目从vscode到vs的迁移记录(图片详解)

记一次vue项目从vscode到vs的迁移记录(图片详解)

技术杂谈小彩虹2021-07-13 19:40:07110A+A-

为啥要迁移

小破公司,前后端一个人负责,破笔记本打开vue项目之后,想要再打开vs写api项目就已经很卡了(卡到白屏无反应需要等待),还要打开SQLServer,每天上班都是自闭状态。想了2种方案,1种是在轻量的vscode上敲vue,c#和sql;另外是在万能的vs上加载已创建的vue项目。

---vscode上敲vue,c#和sql

没找到加载api项目的方法(所以放弃)

附vscode连SQLserver的步骤

下载插件

SQL Server (mssql)

image

配置连接字符串

1.把打开文件的语言模式改为sql

image

2.Ctrl+Shift+p 打开命令面板输入sql

image

3.创建连接

image

4.输入服务器地址

image

5.输入数据库名称

image

6.使用SQLServer登录(下面还有两个自己去试一试)

image

7.用户名

image

8.密码

image

9.是否保存密码,选择yes

image

9.给当前连接命名

image

10.配置成功的提示

image

11.查询(暂时发现本地连接查询不出来)

image

---vs加载已创建的vue项目

附vs连接数据库

工具--连接数据库(我是第一次用!狗头保命)

image

加载已创建的vue项目(重点!!!)

vs打开已创建的vue项目(如果没有这步,已有vue项目,在vs里是打不开的)

1.使用vs installer安装node.js (下面还有一个SQLServer也可以安装)

image

3.在vs里新建vue项目(不要在自己的WebApi项目所在解决方案里面建,单独建,项目可与vue项目名字一样)

image

4.打开命令,输入npm install 安装(npm相关可参考nodejs官网)

image

5.F5运行

image

4.打开项目文件夹,打开文件 VuejsApp1.njsproj ,替换下面代码,通用配置
    <ItemGroup>
        <Folder Include="public\**\" />
        <Folder Include="src\**\" />
    </ItemGroup>
    <ItemGroup>
        <Content Include="public\**\*.*" />
        <Content Include="src\**\*.*" />
    </ItemGroup>

image

5.直接把标记文件放入到已有的vue项目里面(vs创建的可以不要了)

image

6.vs打开vue项目,将项目文件包含进来 重新安装npm install(可以先删除node_modules,安装有点慢的话就多等一会)
7.运行,一定要等node.js框跑完才能打开,成功运行

image image

8.此时vue文件还没有图标,可以安装扩展 扩展--管理扩展,搜索vue 安装Vue.js Pack 2019

写在最后

git相关,现状是前端和后端是2个仓库,想要合并成一个库,可以把vue文件夹放在后端代码里(好处是代码提交的话一起提交,但是对只想用vscode开发vue项目的前端小伙伴不太友好);保留vue项目仓库,在vs解决方案里关联已有vue项目(通过上面步骤改造之后的),皆大欢喜

其实并没有快很多

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们