1.安装环境 ①安装node.js 并添加入环境变量PATH②安装淘宝NPM镜像$ npm install -g cnpm --registry=https://registry.npm.taobao.org③安装webpacknpm install webpack -g ④安装vue-cli脚手架npm install -g vue-cli⑤创建项目模板 vue init wepack vue-multipage-demo⑥cmd进入到要放项目的文件夹⑦安装 cnpm install2.目录结构调整 3.配置文件修改 ①添加依赖 glob （返回目录中的所有子文件） npm install glob②修改build文...
前后端分离后，控制路由跳转的责任转移到了前端，后端只负责给前端返回一个html文档以及提供各种接口。下面我们用作例子的两个项目，均采用vue作为基础框架，一个是SPA应用，另一个是多页应用，均由前端进行路由控制及渲染的。 总体思路 无论单页还是多页，我的实现思路是总体配置404页面的思路就是在前端路由表中添加一个 path: /404 的路由，渲染相应的404页面。同时，配置一个规则，当在用户可访问的路由表中的所有路由都无法匹...
动态路由：当我们很多个页面或者组件都要被很多次重复利用的时候，我们的路由都指向同一个组件，这时候从不同组件进入一个"共用"的组件，并且还要传参数，渲染不同的数据这就要用到动态路由跟路由传参了！ 首先我们来了解下router-link这个组件：简单来说，它是个导航器，利用to属性导航到目标组件，并且在渲染的时候会自动生成一个a标签，当然官方也有说明，加个tag标签属性就可以渲染不同的标签，可以浏览器端查看到并且当一个导...
WebPack虐我千百遍，我带她如初恋。一个项目前台页面写差不多了，webpack几乎零配置，也算work起来了。现在需要编写后台管理界面，另起一个单独的项目，那是不存在的。于是网上了搜了大把大把的文章，很多都是修改了项目的结构，讨厌，vue-cli搞的那一套，干嘛要修改来修改去的。像我这种前端小萌新，webpack的配置改着就把前台部分run不起来了。。。 于是就有了这个笔记： 先看看项目的结构： ├── build ├── config ├── ...
本项目是vue-cli搭建的项目框架，引入axios用于数据请求。配置不同的接口地址，（首先确保已经集成了axios，如对集成axios有疑问的道友，可参看我之间的一篇vue-cli 引入axios）操作如下 一、设置不同的接口地址 找到如下文件 /config/dev.env.js /config/prod.env.js 之后增加接口地址域名配置，增加后的文件内容如下二、在自己重新封装的axios文件中（api/api.js），将配置好的接口地址作为baseURL拼接到接口路径中详细的api.js文...
一、npm 安装axios，文件根目录下安装，指令如下 npm install axios --save-dev 二、修改原型链，在main.js中引入axios import axios from 'axios' 接着将axios改写为Vue的原型属性， Vue.prototype.$http=axios 这样之后就可在每个组件的methods中调用$http命令完成数据请求 三、在组件中使用 methods: { get(){ this.$http({ method:get, url:/url, data:{} }).then(function(res){ console.log(res) }).catch(function(er...
这个项目为移动端项目，主要用于接入公众号服务。项目采用两种登录方式，微信授权登录以及账号密码登录。对于移动端项目而言，为了便于项目扩展以及提供开发热更新速度，项目分为不同的模块，每个模块是一个单页面应用。页面分为两种，一种是需要用户登录之后才能浏览，另一种是用户无需登录即可浏览。无论哪一种，均配置微信分享。 使用的技术 1.使用vue作为框架 2.使用vux作为UI组件库 全局配置微信分享思路 1.区分一般和特殊，一...
最近开发项目的时候逐渐采用vue.js+mint-ui的技术栈，但是昨天开始配置开发环境的时候，遇到了各种报错，即使是按照两家的官方文档配置，也还是会报错，晚上下班后回去配置了一晚上，才终于把它配置好，所以就记录下来，以防后面再次踩坑。。 vue.js介绍 Vue.js 是一个用于创建 web 交互界面的。其特点是 简洁 HTML 模板 + JSON 数据，再创建一个 Vue 实例，就这么简单。数据驱动 自动追踪依赖的模板表达式和计算属性。组件化 用解...
本篇文章主要介绍了vue配置请求本地json数据的方法，分享给大家，具体如下： 在build文件夹下找到webpack.dev.conf.js文件，在const portfinder = require(portfinder)后添加 const express = require(express) const app = express() const appData = require(../data.json) // 加载本地json文件 const seller = appData.seller // 获取对应本地数据 const goods = appData.goods const ratings = appData.ratings const apiRoute...
首先先正经的来一段官网的"忠告"： vuex需要遵守的规则： 一、应用层级的状态应该集中到单个 store 对象中。 二、提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。 三、异步逻辑都应该封装到 action 里面。 文件目录结构文件之间的关系： store文件夹 - 存放vuex的系列文件 store.js - 引入vuex，设置state状态数据，引入getter、mutation和action getter.js - 获取store内的状态 mutation.js - 更改store中状态用的函...
前言：当使用vue-cli进行开发时时常需要动态配置一些设置，比如接口的请求地址（axios.defaults.baseURL），这些设置可能需要在项目编译后再进行设置的，所以在vue-cli里我们需要对这些配置文件进行抽离，不让webpack把配置文件也进行编译。 首先，我们需要在/static 下面新建一个js文件作为配置文件里面的内容如下： window.g={AXIOS_TIMEOUT:10000,SERVICE_CONTEXT_PATH:`http://10.200.199.84:9090/`//配置服务器地址 }这里将所...
问题描述：在vue2.0的以上的版本，vue-cli的build的文件夹下没有dev-server.js文件，那怎么配置mock数据 Vue2.x在build下的webpack.dev.conf.js配置就行 //在const portfinder = require(‘portfinder)后添加 const express = require(express) // nodejs开发框架express，用来简化操作 const app = express() // 创建node.js的express开发框架的实例 var appData = require(../mock/goods.json) //加载本地数据文件 var sell...
1.vue中的vue-cli打包 最近在用vue写一个小项目，其中就用到了vue脚手架工具vue-cli，在测试打包后能否运行过程中遇到不少问题，而且在网上这些问题答案都不太好找，废话不多说，进入正题。 a.执行打包命令：npm run build b.打包之后生成的文件夹为根目录下的dist文件： c.进入dist中 在运行这个index.html之前先说说一些打包配置问题： 在config文件夹下可以看到一个index.js文件，打开其中可以看到有几个属性分别是： asse...
本文介绍vue-cli脚手架工具根目录的babelrc配置文件 介绍 es6特性浏览器还没有全部支持，但是使用es6是大势所趋，所以babel应运而生，用来将es6代码转换成浏览器能够识别的代码 babel有提供专门的命令行工具方便转码，可以自行去了解 vue-cli脚手架的.babelrc文件 {// 此项指明，转码的规则"presets": [// env项是借助插件babel-preset-env，下面这个配置说的是babel对es6,es7,es8进行转码，并且设置amd,commonjs这样的模块化文件，...
最近在学习webpack，跟着课程一个单页面应用，在这里记录一下。这个部分主要讲了如何配置webpack的环境，以及webpack dev的配置。 记录比较粗略，后续会更新。 1.开发环境：vscode,node.js,vue.js,webpack 大家自己安装一下node.js可以参考菜鸟教程 使用的IDE是 VScode 2.项目初始化 快捷键ctrl+` 打开vscode控制台 vscode界面 2.1安装webpack vue vue-loader npm init npm i webpack vue vue-loadernpm 出现warn提醒你需要依赖，...