day 11/25

最新推荐文章于 2026-06-11 09:27:38 发布

原创最新推荐文章于 2026-06-11 09:27:38 发布 · 224 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

本文详细介绍如何使用vue-cli脚手架快速搭建Vue.js项目，包括安装vue-cli、构建项目、配置项目结构及依赖，同时涉及编码规范、单元测试等高级设置。

项目

vue-cli 脚手架的安装

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

通过vue-cli构建项目

指令 vue init webpack 项目名

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-plczxGXS-1574660136438)(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
        })
      })
    }