先叨叨两句

.net core又双叒叕升级了，把VS升级到2022，.net core 5.0已经不再支持，开始学习6.0，顺便把vue的锅也补一下，一直以来用的都是H5模板往里套，新知识的应用比较少，再不学就被时代淘汰了。接触新知识，看看外面的世界。

新建一个vue项目

前置环境

VS Code
VS 2022
npm 安装
PostgreSQL数据库

创建项目

管理员方式打开命令控制台窗口，在指定文件夹下创建一个项目，并依据提示选择框架，我的npm装的比较早，这里提示我升级了，为了避免后面出现某些组件用不了，这里将它升级一下。

npm init vite@latest  项目名称

这个项目就建好了，文件夹中看到新建的项目，接着 npm install ，创建资源引用，可以看到项目中多了一个资源的文件夹。

其中：

node_modules 模块包
public 公共资源
src 项目目录
- assets 静态资源
- components 组件
- App.vue 根组件、
- main.ts 根函数入口，全局配置生效的地方
package.json 项目配置文件，项目的标题、版本，模块的版本等信息
tsconfig.json TS配置文件
vite.config.ts Vite配置文件

接下来，试运行一下npm run dev，提示我们项目已经启动，可以访问本机端口5173

打开看一下：

到这里，创建一个包含基础架构的项目就建好了。

安装前端组件

SCSS
element-plus
vue-router

用VS Code打开项目，在package.json文件中，执行命令安装命令，可以看到配置文件中已经添加进去。

npm install sass --save
npm install element-plus --save
npm install vue-router@next --save

.Net Core 6.0 + Vue 项目尝试相关推荐

ASP.NET Core 2.0 : 三. 项目结构
ASP.NET Core 2.0 : 三. 项目结构原文:ASP.NET Core 2.0 : 三. 项目结构本章我们一起来对比着ASP.NET Framework版本看一下ASP.NET Cor ...
ASP.NET Core 2.0 MVC项目实战
一.前言毕业后入职现在的公司快有一个月了,公司主要的产品用的是C/S架构,再加上自己现在还在学习维护很老的delphi项目,还是有很多不情愿的.之前实习时主要是做.NET的B/S架构的项目,主要还 ...
ASP.NET Core 实战：将 .NET Core 2.0 项目升级到 .NET Core 2.1
一.前言最近一两个星期,加班,然后回去后弄自己的博客,把自己的电脑从 Windows 10 改到 Ubuntu 18.10 又弄回 Windows 10,原本计划的学习 Vue 中生命周期的相关知 ...
ASP.NET Core 2.0 Web API项目升级到ASP.NET Core 3.0概要笔记
本文结构先决条件升级目标框架(Target Framework)的版本过时的IHostingEnvironment与IApplicationLifetime对象 Endpoint Routing ...
基于ASP.NET Core 6.0的整洁架构
背景最近尝试录制了一个系列视频:<ASP.NET Core 6.0+Vue.js 3 实战开发>,本节是视频内部整洁架构的理论和实战的文字稿.因为在录制之前,我通常会编写完整的文字内容作 ...
Entity Framework Core 2.0 特性介绍和使用指南
前言这是.Net Core 2.0生态生态介绍的最后一篇,EF一直是我喜欢的一个ORM框架,随着版本升级EF也发展到EF6.x,Entity Framework Core是一个支持跨平台的全新版本, ...
Entity Framework Core 2.0 使用入门
本文转载自作者:晓晨Master(李志强) 原文章地址 https://www.cnblogs.com/stulzq/p/7717873.html 一.前言 Entity Framework(后面简称 ...
ASP.NET Core 2.0 使用支付宝PC网站支付
概述支付宝有比较多的支付产品,比如当面付.APP支付.手机网站支付.电脑网站支付等,本次讲的是电脑网站支付. 详细代码下载:http://www.demodashi.com/demo/11730. ...
[译]ASP.NET Core 2.0 机密配置项
问题如何在ASP.NET Core 2.0中保存机密配置项(不用将其暴露给源代码管理器)? 答案创建一个ASP.NET Core 2.0空项目,在项目节点上点击右键,并点击菜单项 - 管理用户机密 ...

.Net Core 6.0 + Vue 项目尝试

.Net Core 6.0 +vue 项目尝试