黑马小兔鲜儿Vue3项目 项目初始化

1.前言

第一次写博客，见谅。

---

这个笔记是根据黑马最新的小兔鲜儿做的一些步骤，没有太多的说明是为什么这么做的，请大家还是看一遍视频然后再根据这个敲一遍。或者看这个!文档

2.初始化项目

npm init vue@latest

2.1项目配置

注意一下：我没跟视频一样选择那个eslint！

2.2 安装依赖

切换到你所在的项目目录

npm install

用vscode打开项目

npm run dev

项目运行成功

2.3项目目录

创建如下目录

2.4 初始化git仓库

新建终端

输入 git init

初始化好后左边图标会变绿,然后提交到仓库

git add .
git commit -m '初始化项目'

2.5 jsconfig.json配置别名路径

在项目路径下新建jsconfig.json文件
如下图所示

输入如下代码

{
  "compilerOptions" : {
    "baseUrl" : "./",
    "paths" : {
      "@/*":["src/*"]
    }
  }
}

2.6 引入ElememtPlus

安装,如下图所示

---

我用的是npm

 npm install element-plus --save

还要安装一个插件，如下图所示

npm install -D unplugin-vue-components unplugin-auto-import

2.7 ElememtPlus配置自动按需导入

在vite.config.js文件中配置
最终如图所示

---

代码

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers

AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),

测试一下，记得先重启项目

---

把App.vue的这些删掉

变成这样

看效果运行是这样的话就成功了

提交

git add .
git commit -m "ElememtPlus完成自动按需引入"

2.8 主题定制

先安装sass的处理器

npm i sass -D

在styles文件夹下新建目录element并在此目录下新建index.scss文件

@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      // 主色
      'base': #27ba9b,
    ),
    'success': (
      // 成功色
      'base': #1dc779,
    ),
    'warning': (
      // 警告色
      'base': #ffb302,
    ),
    'danger': (
      // 危险色
      'base': #e26237,
    ),
    'error': (
      // 错误色
      'base': #cf4444,
    ),
  )
)

更改vite.config.js
改成这样
还要添加这段代码

  css: {
    preprocessorOptions: {
      scss: {
        // 自动导入定制化样式文件进行样式覆盖
        additionalData: `
          @use "@/styles/element/index.scss" as *;
        `,
      },
    },
  }

重启项目

2.9 axios配置

安装

npm i axios

在utils目录下新建文件http.js并写入以下代码

import axios from "axios"
const http =axios.create({
baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net',
 timeout: 5000
}) 
http.interceptors.request.use(config=>{
return config
},e=>{
Promise.reject(e)
})
http.interceptors.response.use(res => res.data, e => {
return Promise.reject(e)
})
export default http

在apis目录下新建测试文件test.js并写入以下代码

import http from '@/utils/http.js'
export function  getCategory(){
  return  http({
    url: 'home/category/head'
  })
}

测试
在main.js中引入刚才的测试文件test.js，并写入以下代码

import { getCategory } from "@/apis/test.js";

getCategory().then((res) => {
  console.log(res);
});

最后看一下浏览器控制台

这样就配置好了

2.10 一级路由配置

把下面这两个删掉

新建文件，如下图

记得在index.vue写入一行代码来表示这是哪个组件
打开router/index.js文件，删掉不用的组件或者配置，如下图所示

导入刚才新建的组件,并配置。如下图所示

在App.vue配置路由出口，如下图所示

最后自己测试一下

2.11 二级路由配置

在views下新建Home和Category目录并创建想应得index.vue,做好标记是哪个组件，如下图所示

在router/index.js导入并配置,如下图所示

然后再view/Layout/index.vue下配置路由出口，如下图所示

测试一下

2.12静态资源引入和插件安装

相应资源点击这里获取
目录结构如下

在main.js中引入

2.13 scss文件的自动导入

在styles目录下新建var.scss并写入一下代码

$xtxColor: #27ba9b;
$helpColor: #e26237;
$sucColor: #1dc779;
$warnColor: #ffb302;
$priceColor: #cf4444;

在vite.config.js配置自动导入

测试一下，记得重启项目
结果如下