Vue项目实战

一、产品开发的大致流程

一般公司流程如下：

1、产品经理设计产品原型图
2、UI设计师设计符合需求的原型UI图
3、前端100%还原高保真UI设计图
4、后端设计接口
5、前后端接口联调
6、前后端功能自测
7、测试、运维进行产品的测试和上线

一般大型公司流程如下：

1、需求侧提出需求
2、SE进行需求分析并输出需求文档
3、开需求分析会（甲方、SE、开发、测试）
4、相关开发人员投入开发，开发完毕后进行自测且输出自测报告
5、合并代码到dev分支后进行申请转测
6、运维部署项目，测试人员开始测试并记录相关问题(开发跟进问题)
7、需求实现后合并代码到生产分支发布上线

二、项目搭建

局部安装vue-cli 4.5.15 和项目创建：

npm init -y # 初始化项目依赖文件
cnpm i -D @vue/cli # 安装脚手架
npx vue -V # 查看vue-cli版本号
npx vue create project-one # 创建项目
# OR
npx v

三、项目配置

1. 自动打开项目

// vue.config.js
module.exports = {
    devServer: {
        open: true
      	// host: 'localhost'
    }
}

2. 在项目中使用ElementUI
   官网：[https://element.eleme.cn/#/zh-CN]

• 2.1 全局使用

  • 2.1.1 安装

      npm i element-ui -S
  

  • 2.1.2 在main.js中完整引入

      // main.js
      import ElementUI from 'element-ui';
      import 'element-ui/lib/theme-chalk/index.css';
  
      Vue.use(ElementUI);
  

  • 2.1.3 使用参考官方示例,其组件使用特点是都是el-标签名

  <el-button>demo</el-button>
  

• 2.2 按需使用

  • 2.2.1 安装

      npm i element-ui -S
      npm i babel-plugin-component -D
  

  • 2.2.2 在.babel.config.js新增以下内容

      "plugins": [
          [
              "component",
              {
                  "libraryName": "element-ui",
                  "styleLi