组件设计原则：就近维护 mock数据模拟：/#/xx/api vue1.0 json获取不到（请求出现sockjs-node/info文件，所以不能加地址栏不加#来获取模拟请求数据） vue2.0前端请求直接 /api 来获取数据 组件设计拆分：移动端项目 index头部添加meta viewport等 设计稿按照2倍 vue中样式文件 并没有 处理兼容性 ，因为：vue-loader npm 依赖的postcss直接帮我们处理了兼容性问题autiprefix 也可以实现 css兼容性处理手机端的 dpi ...
目录结构：index.html:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><div id="app"></div><script src="/dist/main.js"></script></body></html>main.jsimport Vue from ‘vue‘ import App from ‘./App.vue‘ import MM from ‘../packages/...
我犯的错误：作为vue小白，并不知道还要单独去创建初始的vue项目，于是自己在webstrom中建了一个Empty Project，在其中新增了一个js文件，就开始import Vue from “vue”了。运行后自然就报错了：SyntaxError: Unexpected identifier，被自己蠢哭~下面进入正题，vue项目初始化步骤如下：1、默认你已经安装好了Node.js、WebStrom、npm、vue/vue-cil、webpack。2、win+R→cmd打开命令行，cd进入到希望创建vue项目的路径，然后执行项目...
https://blog.csdn.net/ink_if/article/details/79015811参考别人的博客 初始化项目，vue init webpack-simple demo 然后npm install 再然后npm run dev 就报错了，最后找出是版本更新原因， 解决方案： npm install之后，运行 npm i -D webpack-dev-server@2.9.7原文：https://www.cnblogs.com/qianjin888/p/10086950.html
1.在src下新建util文件夹，在util下新建request.js文件：封装axios：import axios from‘axios‘ import QS from‘qs‘; // import store from ‘@/store/index.js‘; import { Message } from‘element-ui‘; //element库的消息提示，可以不用// 环境的切换 // if (process.env.NODE_ENV == ‘development‘) { //开发 // axios.defaults.baseURL = ‘/api‘;} // else if (process.env.NODE_ENV == ‘debug‘) { //测试 // ...
一、 脚手架配置 需要创建vue.config.js文件 相当于webpack.config.js 创建好之后对api接口进行管理 第一个是对api请求接口做处理 第二个是简化文件引入操作 不用在使用 ../ 去找需要引入的文件 api 为接口文档连接、 components存放组件、 views 存放页面、 utils 存放封装的方法 、 router 路由、 store vuex的公共管理 都是一些需要的文件夹二、 Vuex的基本配置 state act...
解决方法：安装 "babel-polyfill"1、命令：cnpm install --save-dev babel-polyfill 2、在入口main.js文件引入：import ‘babel-polyfill‘，放页面顶部最好。3、在build文件夹下找到webpack.base.conf.js中app: ["./src/main.js"]改为app: ["babel-polyfill", "./src/main.js"]即：module.exports = {entry: {app: ["babel-polyfill", "./src/main.js"]}如图： 中的 改为：如果还不显示，就看下报错，有可能是引入的第三方组...
目录创建Vue项目Vue项目环境搭建#Vue项目创建#pycharm配置并启动vue项目#vue项目目录结构分析#项目生命周期添加组件-路由映射关系文件式组件结构配置全局css样式子组件的使用组件的生命周期钩子路由逻辑跳转路由传参配置问号携带参数 : ?id=1#路由有名分组携带参数: /course/1/detail#创建Vue项目Vue项目环境搭建#Copy1) 安装node 官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/2) 换源安装cnpm >: npm install -g cnpm -...
VsCode调试vue项目VsCode如何调试vue项目，VsCode需要安装插件以及配置launch.json文件。找到“扩展”或者按快捷键“Ctrl+Shift+X”，如下图，输入Debugger for Chrome查找，并安装。配置launch.json打开存储库,在网页上查看信息,参考官网的Launch配置本地的launch.json本地launch.json配置(如果找不到这个文件,点击运行->打开配置)本地配置文件launch.json{"version": "0.1.0","configurations": [{"name": "Launch localhost","t...
// 注册一个全局自定义指令 `v-focus`Vue.directive(‘focus‘, function (el) {el.focus()})这样使我们在组件中可以自用的调用v-focus方法，给他绑定定义布尔变量来控制元素是否获得焦点但是这里要注意的是组件<el-input>本身在页面中渲染成了一个div元素所以我们要在<el-input>被绑定为v-focus的同时在自定义指令中获取组件下通过querySelector()方法获取input元素<el-input v-model.trim="searchFor" @blur="blurSearchFor"v-fo...
1、打开WebStorm 2019.3.3 x64 2、直接create，注意项目文件夹的名字不能是驼峰命名，不然不能create。这里的cli应该可以改，下载一些配置的，因为后面下载特别慢。3、下载了一段时间，发现特别慢，等了一会提示用国内的镜像，快了很多。 4、 左边是项目结构，右边直接点红框中启动。 5、点击下面local后面的地址，自动弹出页面。 ok，是不是非常简单。：）原文：https://www.cnblogs.com/happyzoo/p/12837484.html
要实现如下效果使用npm安装better-scroll准备一个city.jsonMOCK数据里面返回了从A到Z的城市和首页数据获取一样，引入axios获取城市数据把数据分发到子组件中：子组件接受数据并循环:效果完成: 原文：https://www.cnblogs.com/rmty/p/11040799.html
页面中有弹框的时候就会出现对弹框中的内容进行操作的情况，但是在操作之后关闭弹框后再次打开，弹框中还是之前的操作过的页面，我们希望弹框是进行了重新初始化的，elementui的form组件中提供了一个resetFields的方法可以重置form表单的内容 但是当弹框中含有我们自己封装的组件的时候就没有类似的方法去进行重置了，所以需要对弹框进行新的初始化 在点击修改的时候设置组件的v-if值为true，并在$nextTick中进行初始化后要进行...
参考链接：https://blog.csdn.net/ddx2019/article/details/104972089/原文：https://www.cnblogs.com/hahahakc/p/13096145.html
最近项目中需要在图片预览时,可以旋转图片预览,在网上找了下,发现有一款功能强大的图片组件:viewerjs. git-hup: https://github.com/fengyuanchen/viewerjs在git上看了下,有很多功能,不过我的项目只需要做个图片旋转功能,引入这个组件感觉大材小用了,于是自己写了个简易版的,因为我们只是查看而已,没什么要求.如果你需要比较精确的图片旋转功能,可以使用这个viewerjs组件功能描述: 一个图片预览框,三个操作按钮: 上一张,下一张,旋转...