.Net Core 6.0 + Vue 项目尝试

先叨叨两句

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

新建一个vue项目

前置环境

1. VS Code
2. VS 2022
3. npm 安装
4. 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