文章目录
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
配置自动导入
测试一下,记得重启项目
结果如下