工学结合2019/11/25

项目

vue-cli 脚手架的安装

通过cmd 输入 npm 安装 npm install -g vue-cli

通过vue-cli构建项目

指令 vue init webpack 项目名

​ **cmd乱码问题 设置字符集 CHCP 65001 **

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6a4hHPl3-1574660452016)(C:\Users\hasee\AppData\Roaming\Typora\typora-user-images\image-20191125085520662.png)]

• 项目名
• 项目描述
• 作者
• Vue build 选择runtime+compile
• 安装路由 Install vue-router y
• 是否使用esLink规范代码 Use ESLint to lint your code? y
• 选择eslint的模板 Pick an ESLint preset Standard
• 设置单元测试 Set up unit tests No
• 是否使用e2e 测试 Setup e2e tests with Nightwatch? No

前端发展的趋势

• vue的核心
  • 数据驱动 DOM中数据的自动映射
  • 组件化

项目目录结构

• build webpack配置相关目录

• config webpack配置相关目录

• node-modules vue-cli安装的依赖包

• src 项目源码

• static 存放静态资源 .gitkeep 提交至GitHub用 如果文件夹为空 git就会忽略这个文件夹

• babelrc 将ES6语法编译成ES5

• editconfig 编辑器的配置

  • charset = utf-8 字符集

    indent_style = space 缩进采用 空格

    indent_size = 2 缩进俩空格

    end_of_line = lf 换行风格 linux

    insert_final_newline = true 文档末尾加新行

    trim_trailing_whitespace = true 自动一处行尾空格

• eslintignore 忽略语法检查

• eslintrc eslint的配置文件

• gitignore git忽略提交的文件

• index.html 入口的html文件 没有依赖任何的js css文件 在编译中 webpack自动插入需要的文件

• package.json 项目的配置文件

  • ^2.5.2 最低要求版本

资源准备 resource文件下

准备图标

• https://icomoon.io/
• icon MoonAPP
• import icons 选中要导入的图标
• generate font 创建字体
• download

Mocking 模拟数据

//第一步   首先 先引入 express  node框架  简化请求数据的代码
const express = require('express');
const app = express();
//引入数据
var appData = require('../data.json');
var seller = appData.seller;
var goods = appData.goods;
var ratings = appData.ratings;
//构建路由对象
var apiRoutes = express.Router();
app.use('/api', apiRoutes);

//第二步  找到devServer
    before(app) {
      app.get('/api/goods',(req, res) => {
        res.json({
          data: goods
        })
      }),
      app.get('/api/ratings',(req, res) => {
        res.json({
          data: ratings
        })
      }),
      app.get('/api/seller',(req, res) => {
        res.json({
          data: seller
        })
      })
    }