vue-cli

一 、引包 const axios = require('axios'); const express = require('express'); const apiRoutes = express.Router(); 二、配置 const devWebpackConfig = merge(baseWebpackConfig, { module: { rules: utils.styleLoaders({sourceMap: config.dev.cssSourceMap, usePostCSS: true}) }, // cheap-module-eval-source-map is faster for development devtool: config.dev.devtool, // these devServer options should be customized in /config/index.js devServer:{ //在这里添加一个before方法 before(apiRoutes){ apiRoutes.get('/api/getDiscList',(req,res)= > { const url = '这里是要链接的api地址'; axios.get(url, { headers: { referer: '配置api地址referer',

最近准备开发一款 web app，是前后端并行开发的场景，因此需要 mock 一些数据，但是 vue 官网上发现没有跑在webpack上的例子。 案例数据来自网上。 一、安装 vue 脚手架并初始化 webpack 项目 //全局安装 vue-cli npm install vue-cli -g //创建一个基于 webpack 模板的新项目 vue init webpack mock-server-demo //切换至mock-server-demo目录 cd mock-server-demo 二、安装依赖 //我们使用axios来发起http请求 npm install axios --save //安装依赖mockjs npm install mockjs --save-dev 三、在项目根路径下创建mock文件夹 3-1 新建一个 index.js 文件，公共一个 get 请求 3-2 新建一个 util.js 文件，用来读取指定的 json 文件 3-3 新建一个 userInfo.json 文件，用来保存随机生成的一些数据 //index.js const Mock = require('mockjs');//mockjs 导入依赖模块 const util = require('./util');//自定义工具模块 //返回一个函数 module.exports =

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，运行在服务器端。nodejs所携带的npm包管理命令可以方便的安装vue-cli, webpack, webpack-dev-server等命令，而这些命令是创建或者运行vue项目的基础。 1、安装nodejs 在http://nodejs.cn/download/下载nodejs的windows安装包，作者使用的版本是12.16 双击安装包，一直下一步直到完成 验证是否安装成功，打开命令行，输入以下命令 node -v 回车 v12.13.0 npm -v 回车 6.12.0 2、安装常用命令 打开命令行，输入以下命令 # 安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org # 安装webapck cnpm install -g webpack # 安装webpack-dev-server cnpm install -g webpack-dev-server # 安装webpack-cli cnpm install -g webpack-cli # 安装vue-cli cnpm install -g vue-cli 以上，我们安装了nodejs，然后通过npm命令安装了后面强依赖的几个常用命令。 来源：

都说Vue2简单上手容易，的确，看了官方文档确实觉得上手很快，除了ES6语法和webpack的配置让你感到陌生，重要的是思路的变换，以前用jq随便拿全局变量和修改dom的锤子不能用了，vue只用关心数据本身，不用再频繁繁琐的操作dom，注册事件、监听事件、取消事件。。。。（确实很烦）。vue的官方文档还是不错的，由浅到深，如果不使用构建工具确实用的很爽，但是这在实际项目应用中是不可能的，当用vue-cli构建一个工程的时候，发现官方文档还是不够用，需要熟练掌握es6，而vue的全家桶(vue-cli,vue-router,vue-resource,vuex)还是都要上的。 vue-cli这个构建工具大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，相当于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发就OK。 1.安装vue-cli ① 使用npm（需要安装node环境）全局安装webpack，打开命令行工具输入： npm install webpack -g 或者（ npm install -g webpack ），安装完成之后输入 webpack -v ，如下图，如果出现相应的版本号，则说明安装成功。 注意：webpack 4.X 开始，需要安装 webpack-cli 依赖 ,所以使用这条命令 npm install

3 月，跳不动了？>>> 上一篇：vue-cli目录结构认识 一起学vue—— vue学习总路线 ——————————^~^我是萌萌哒分割线^~^———————————————— 前言 上一篇简单认识了脚手架的目录结构，这篇我们来继续看看vue-cli里面的我们需要编写的文件都是些什么。 src文件夹 先来看一下src文件夹里有些啥 一个个来看 （1）assets 是什么：存放静态文件的，里面会放一些比如js，css，图片之类的。 （2）components 前面学过语法应该知道这是什么吧，如果不知道的话，还是建议先去看看语法哦，磨刀不误砍柴工嘛。 是什么：存放组件的 这里面的HelloWorld.vue （a）、一个.vue文件由什么组成：template（模板）、js（script）、style（样式） （b）、template：一个模板里面只能有一个父节点，比如我们这里的class为hello的父节点div，他没有其他的兄弟节点。 （c）、script：vue通常使用es6来写这部分，然后使用export default导出，他里面可以写比如data，mounted，methods等等。其中，data一定要用return来返回。 （d）、style：跟我们写样式表一样，都是使用<style></style>来包裹，不过，他这里是默认影响全局的，也就是说回影响到包含他的所有页面

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 module.exports = { // 基本路径 baseUrl: '/', // 输出文件目录 outputDir: 'dist', // eslint-loader 是否在保存的时候检查 lintOnSave: true, // use the full build with in-browser compiler? // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only compiler: false, // webpack配置 // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md chainWebpack: () => {}, configureWebpack: () => {}, // vue-loader 配置项 // https://vue-loader.vuejs.org/en