前端Vue2项目搭建过程

一.准备工作

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: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']
  ]
};