1、项目创建
打开终端,以管理员身份运行
cd到需要创建项目的文件夹下
执行代码: npm create vue\@latest
输入项目名,其余全部选择否,即可创建项目
运行提示的命令:npm install 与 npm run dev
(这里如果有报错的话,可以在网上搜索)
之后使用VSCode打开创建的文件夹即可
2、安装依赖
第一步就是:npm -i
安装依赖
第二步:npm i vue-router
因为网站是多页面,所以安装vue-router
第三步:npm i vuex
vue的全局状态管理插件,还有一种更新的是pinia
第四步:npm i axios
项目肯定是要发请求的
第五步:npm i element-plus
组件不可能都是自己画,使用饿了么团队开发的UI库
3、删除不需要的代码
把APP.vue文件中,只保留vue文件的基础框架,在templat标签中写入<router-view></router-view>
将自动生成的views文件夹下的vue文件删除,写自己需要的内容
4、修改应用名称
修改index.html文件中的title标签,填写自己应用的名称
5、配置路由
在router文件夹中的index.js文件中,配置路由
import { createRouter, createWebHistory } from 'vue-router'
import home from '../views/home.vue'
const router = createRouter ( {
history : createWebHistory ( import . meta. env. BASE_URL ) ,
routes : [
{
path : '/' ,
name : 'home' ,
component : home
} ,
{
path : '/test' ,
name : 'test' ,
component : ( ) => import ( '../views/test.vue' )
}
]
} )
export default router
6、写页面
当路由配置好之后,开始写具体页面,主要是画页面,也就是前端设计,也就是这时候就开始使用elementplus
复制elementplus的代码以后,可以使用 “ Shift + Alt + F ” 的快捷键对代码进行格式化
这里要注意在main.js中使用elementplus,比如:createApp(App).use(ElementPlus)
按照自己的需求,修改复制过来的代码
7、配置baseURL
在src文件夹中创建一个config文件夹,其中创建baseURL.js文件
在baseURL.js中写入如下代码
export const baseURL_dev = "https://127.0.0.1"
export const baseURL_test = "https://127.0.0.1"
8、封装axios
在src文件夹中创建utils文件夹,在其中创建request.js文件,在其中对axios进行封装
在request.js文件中写入如下代码
import axios from "axios" ;
import { baseURL_dev } from "../config/baseURL.js"
const instance = axios. create ( {
baseURL : baseURL_dev,
timeout : 10000 ,
} ) ;
export const $get = async ( url, params ) => {
let { data} = await instance. get ( url, { params} )
return data
}
export const $post = async ( url, params ) => {
let { data} = await instance. post ( url, params)
return data
}
9、封装api,统一发请求
在src文件夹下创建api文件夹,在其中新建admin.js文件
在其中写入如下代码
import { $get, $post} from '../utils/request.js'
export const $Login = async ( params ) => {
let ret = await $post ( 'admin/login' , params)
console. log ( ret) ;
}
10、创建模拟数据
安装node(已安装)
使用命令行,安装json-server:npm i -g json-server
一般情况下,在当前项目下创建一个data文件夹,在data文件夹中创建一个文件:data.json
在data.json中编辑好模拟的数据
然后在data.json所在的目录,打开命令行,数据命令启动服务。json-server --watch data.json -p 3008