一.准备工作
1.可以上网找一些设计稿寻找思路开发页面界面布局
站酷设计网站：站酷ZCOOL-设计师互动平台-打开站酷，发现更好的设计！
花瓣网：花瓣网 - 陪你做生活的设计师（创意灵感天堂，搜索、发现设计灵感、设计素材）
2.找项目找需求
模仿别人如何开发设计
GitHub: Let’s build from here · GitHub
3.写需求文档
设计什么页面，主界面，首页，分类，收藏，搜索，个人中心页等等
有些什么功能，用到什么技术栈
4.找接口
5.使用git对项目进行托管
二.快速创建vue项目以及做移动端适配
vue cli 脚手架工具 ----> vue ui 或者 vue create 项目名
做移动端适配就是让项目写入px时自动跟随界面屏幕改变进而转换成适配大小的rem
--------->安装 npm i amfe-flexible -S
----------->安装 npm install --save postcss-pxtorem@5.1.1
------>在项目入口文件main.js 中引入amfe-flexible import 'amfe-flexible'
----->在根目录的index.html 的头部加入手机端适配的meta代码
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
------>新建postcss.config.js文件，然后配置以下代码并保存
module.exports = {
module: {
rules: [{
test: /\.vue$/,
use: 'vue-loader'
}, {
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}, {
test: /\.css$/,
use: [
'style-loader',
'css-loader',
]
}]
},
plugins: {
'autoprefixer': {
overrideBrowserslist: [
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >= 8"
]
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}三.配置vue.config.js
const { defineConfig } = require('@vue/cli-service')
const path = require('path')
module.exports = defineConfig({
transpileDependencies: true,
// 设置公共路径
publicPath: './',
// 开启http服务(协议、ip、端口)
// devServer 仅仅是开发环境中使用，打包之后，哪些代理的ip是不能使用
devServer: {
// host: '127.0.0.1',
// 设置静态资源路径 htmlcssjs图片
static: {
directory: path.join(__dirname, 'dist'),
},
// 端口 （当前项目环境）
// http://localhost:3005
port: 8080,
// 自动打开网页
open: true,
// 热更新 保存JS代码)
hot: true,
//服务代理 (这数据接口仅仅在开发环境下使用|辅助开发的作用)
proxy: {
'/api': {
// 代理地址（其他服务器环境）
target: 'https://www.gaokaozhitongche.com',
changeOrigin: true,
secure: false,
// 重载
// pathRewrite: {
// '^/api': ''
// }
},
},
}
})
// url: 'http://localhost:8080/api/v2/ranks/index-top3',
// url: 'https://www.gaokaozhitongche.com/api/v2/ranks/index-top3',//跨域接口四.配置网络请求
------>安装axios库 npm install axios
--------->挂载到main.js 入口文件上 import axios from 'axios'
------>在项目中创建api目录，在该目录下可以创建index.js文件，在这个文件中，可以创建axios实例进行配置，以及封装整个项目所需的接口，就可以在组件中调用封装的接口,以下是实例代码配置
// 接口地址：
// URL: http://localhost:8080/api/v2/ranks/index-top3
// 请求方式: GET
import axios from 'axios'
// 创建axios实例
const _axios = axios.create({});
// 添加响应拦截器
_axios.interceptors.response.use(
function (response) {
// 获取数据成功做些什么
// 返回响应对象中的data即可
return response.data;
},
function (error) {
// 响应失败
return Promise.reject(error);
}
);
// 记录服务器地址
const HOST_URL = 'http://localhost:8080';
// 接口1：
// GET 方式
export const ranksIndexTop = (data = {}) => {
return _axios.get(`${HOST_URL}/api/v2/ranks/index-top3`, { params: data })
}
// POST 方式 (以后使用再测试)
export const postFn = (data = {}) => {
return _axios.post(`${HOST_URL}/xxxxxx`, data, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
}
// 接口2：
// 接口3：
// 接口4：
// 接口5：
// 接口6：
// 接口7：
// 接口8：五.设置主题颜色
做一些全局样式，颜色边距这些，那么项目的统一颜色可以引入该主题样式，修改时就只需要修改该全局样式，整个vue项目就会改变
// 全局变量
// 网站/项目 外观主题
// 例如：外边距 内边距 背景色 字体色 边框色
@pad: 0 15px;
@bgColor: #1588F5;
@fontSize: 20px;
@borderColor: #1b7dd8;
@logoColor: #fff;
//可以设置web字体引用
@font-face {
font-family: 'logotext';
src: url(./font.ttf);
}到这里可以进行开发啦！！！
六.项目总结（容易出现的问题）
1、数据动态渲染，处理json格式数据的方式要熟练
2、页面效果要美观（视觉效果图）字体、颜色、背景、间距 色彩搭配。
3、 进行数据解剖取值，是否判断数据有值
4、 编写代码的速度要提升、工作量少 (没有拓展)
5、页面设计要合理、一张普通页面，不能超50%留空白
6.、路由、路由守卫、导航跳转，考虑项目问题、细节是否全面
7、核心功能必须实现
8、用户与界面的交互逻辑，处理能力急需提升
9、快速定位代码错误、独立解决bug的能力
10、描述项目、语言组织表达能力，开发流程、工作流程
11、开发过程中、要时不时的清除历史记录
在这基础上我们可以引用vant组件库和vuex来进行状态管理，解决繁琐的子传父，父传子的麻烦
七.附加
vuex插件下载
在通过脚手架vue cli 创建vue 项目时，可以把vuex 插件勾选上，那么就可以看到生成了一个store文件夹，可以进行组件之间传值
vant@2插件库下载
----------->安装Vant2 npm i vant@latest-v2 -S
-------------> 安装插件 编译过程中将 import 的写法自动转换为按需引入的方式
npm i babel-plugin-import -D
------------> 在 babel.config.js 中配置以下代码
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};
