Vue实训---1-创建Vue3项目

0-在VSCode中的终端中运行npm -v查看版本号

如果出现——“npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1，因为在此系统上禁止运行脚本。……”的错误，则需要在 vscode 终端执行

Set-ExecutionPolicy -Scope CurrentUser RemoteSigned

命令即可。

1.创建项目（项目名为my-vue-project）

npm create vite@latest my-vue-project -- --template vue

运行命令npm -v，查看npm版本号，如果是npm 7或更高版本运行以上命令即可。如果是npm 6或更低版本，使用npm create vite@latest my-vue-project --template vue创建项目。

根据提示，依次运行提示的3条命令：

  cd my-vue-project
  npm install
  npm run dev

项目启动后，会默认开启一个本地服务，点击或者在浏览器中输入http://localhost:5173/网址，浏览器显示结果如下图：

2.删除项目中的不必要的代码

删除src/main.js中导入默认样式的语句：

import './style.css'

然后删除src/style.css样式文件。

将App.vue中的内容删除到只剩以下代码即可：

<script setup>

</script>

<template>
123
</template>

<style scoped>

</style>

删除src\components\HelloWorld.vue文件，不需要该文件。

3.下载必备的依赖

npm install less
npm install vue-router
npm install element-plus
npm install @element-plus/icons-vue

先在终端Ctrl+C停掉项目，然后依次输入以上命令。

4.为项目的src文件夹配置别名“@”方便后续使用：

在vite.config.js文件中添加别名：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  // 添加别名, 使得在项目中可以使用 @ 代替 /src
  resolve: {
    alias: {
      '@': '/src'
    }
  }
})

5.复制图片等静态资源到assets文件夹中

文件内容在百度网盘：
链接: https://pan.baidu.com/s/14Y2krFCGM-ximN-AZpOioA?pwd=8888 提取码: 8888

复制images和less文件夹到到src\assets文件夹中：

6.在src/mian.js中引入样式文件

// 引入全局样式，是对样式的初始化
import "@/assets/less/index.less"

 测试：在命令行运行npm run dev查看浏览器源代码，body的样式为background-color: #f5f5f5;

说明@别名能够正常使用，样式能够正常显示。