Vue3+.NET6 actual combat flower network e-commerce project (1)

1. Install NodeJS environment

1. The role of the environment

The development of Vue projects needs to be created and started through the nmp command folder. Installing nodejs is just to get this command, which has nothing to do with using nodejs development.

2. download link

http://nodejs.cn/download/

3. Check the version number through node --version to see if the installation is successful

2. Install Vue-CLI

1. Scaffolding tool introduction

Vue provides an official CLI to quickly build complex scaffolding for single-page applications (SPA). It provides a fully-featured build setup for modern front-end workflows. Get up and running in minutes with hot reload, lint checks on save, and production-ready builds

2. install command

npm install -g @vue/cli

3. Check the version number through vue --version to see if the installation is successful

4. create project

First, create a new folder in your own disk named Huahua.com, enter the cmd command in this folder, and create a new project here

Enter the command vue create demo1 (project name)

Choose Vue3

Then enter the command

Then the following figure appears

Then we visit this port to see if it is successful

This interface appears to indicate that the project has started successfully.

5. Project directory introduction

node_modules module package (all downloaded through npm are in this module package)

public public resources

src project directory

assets Static resources

components component

App.vue root component

main.ts root function entry, where the global configuration takes effect

package.json project configuration file, project title, version, module version and other information

3. Install TypeScript

1. Introduction to typescript

typeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。

2. 在vue项目中使用：命令语句为 vue add typescript

第一个选择NO剩下的选择YES

3. 安装scss

安装命令：npm install sass-loader node-sass --save

运行命令： npm run serve

四.Element Plus的介绍和使用

1. 框架介绍

Element Plus ，基于Vue3面向设计师和开发者的组件库

2. 安装命令

npm install elememt-plus --save

我在下载时报了404错误，然后经过百度查看发现可能是默认版本太高所以我下载了npm install [email protected] --save这个版本的，测试一下发现这个没有组件效果所以在vacode中引入vue add element-plus这个语句

3. 项目中导入

从这开始import ElementPlus from 'element-plus'

import 'element-plus/dist/index.css'导入样式包（后边导入到）