一.准备工作
1.可以上网找一些设计稿寻找思路开发页面界面布局
站酷设计网站：站酷ZCOOL-设计师互动平台-打开站酷，发现更好的设计！
花瓣网：花瓣网 - 陪你做生活的设计师（创意灵感天堂，搜索、发现设计灵感、设计素材）
2.找项目找需求
模仿别人如何开发设计
Gitee - 基于 Git 的代码托管和研发协作平台
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:3005port: 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']]
};
