vue

1、安装相关工具 node.js环境 ： 下载地址 vue的环境要求 npm ：node.js的包管理和分发工具，在安装node.js的时候将会自动安装npm 安装完后可以cmd输入命令查看是否成功： 之后可切换成 淘宝镜像地址 (下载速度更快): npm i -g cnpm --registry=https://registry.npm.taobao.org webpack :打包工具。 全局安装命令： npm install -g webpack 输入命令查看是否安装成功 vue-cli ：vue脚手架 安装命令:npm i -g vue-cli 查看安装是否成功 2、搭建项目 在想要搭建的文件夹中输入命令行: vue init webpack demo 等待 安装成功之后显示： 3、打开项目： 选择搭建的vue文件夹: 选择右上角启动方式npm： 设置启动命令 等待启动并访问： 来源： CSDN 作者： 阿谢拉特 链接： https://blog.csdn.net/qq_42936062/article/details/104497095

1.配置 (1)命令行： cnpm install node-sass --save-dev cnpm install sass-loader --save-dev cnpm install style-loader --save-dev （2）webpack.base.conf.js的module中加入 { test: /\.scss$/, loaders: ["style", "css", "sass"] } (3)代码： <style lang="scss"></style> 2.如果sass-loader版本过高报错则 命令行 npm uninstall sass-loader npm install sass-loader@7.3.1 --save-dev 来源： CSDN 作者： ??or?? 链接： https://blog.csdn.net/zhangyr_student/article/details/104497557

1.安装svg-sprite-loader cnpm i svg-sprite-loader -D 2.在阿里iconfont下载好icon,保存成svg格式， 放在vue项目文件下面，我这里是icon文件夹，然后创建一个index.js文件 icons--index.js import Vue from 'vue' import SvgIcon from '@/components/SvgIcon'// svg component // register globally Vue.component('svg-icon', SvgIcon) const req = require.context('./svg', false, /\.svg$/) const requireAll = requireContext => requireContext.keys().map(requireContext) requireAll(req) 3.在components文件夹中创建一个SvgIcon文件夹以及index.vue SvgIcon文件夹下的index.vue <template> <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="

# vue项目(用webpack构建)的前提是已安装了node.js,vue,vue-cli,webpack # 主要命令 构建：vue init webpack 项目名（纯英文，且不可驼峰） 运行：npm run dev 打包：npm run build(需要修改配置信息) # element-ui ## 安装：npm i element-ui -S ## 引用：在main.js中 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ## 按需引入： ## 安装 babel-plugin-component npm install babel-plugin-component -D ## .babelrc 修改为 { "presets": [["es2015", { "modules": false }]], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] } ## 使用 import { Button, Select } from 'element-ui' Vue

1、问题 用vue-cli构建的项目，在build打包上线后，背景图片路径解析出错，导致上线后的项目背景图片无法显示。 2、原因 在vue-cli构建项目后，有两种运行方法： npm run dev: 开发环境，资源使用绝对路径，可以看到正常的背景图片； npm run build: 打包项目，相对路径，上线后路径解析错误。 注意：通过img标签引入的图片是正常的，因为img标签是html标签，路径是从index.html可是访问，可以根据这一特点解决背景图片的问题。 3、解决方法 （1）、将背景图片通过行内样式引入 在data中定义一个style： data () { return { style: { background: 'url("../../static/bg.png") center', backgroundSize: '1920px 100%' } } } 然后通过行内样式引入 <div :style='style' ></div> 这样就可以解决问题了 （2）、修改配置（未验证） 打开build/utils.js，在文件相应位置加入红框里的内容， 其中的值根据自己的实际情况配置 。 来源： CSDN 作者： Lycorisradiata0619 链接： https://blog.csdn.net/Lycoriy/article/details/104497491

export function addClass ( el, className ) { if ( hasClass ( el, className )) return let newClassName = el.className.split ( ' ' ) newClassName.push ( className ) el.className = newClassName.join ( ' ' ) } export function removeClass ( el, className ) { if ( ! hasClass ( el, className )) return let newClassName = el.className.split ( ' ' ) let index = newClassName.findIndex ( item = > { return item == className } ) newClassName.splice ( index, 1 ) el.className = newClassName.join ( ' ' ) } export function hasClass ( el, className ) { let reg = new RegExp ( '(^|\\s)' + className + '($|\\s)' )

准备工作： 首先，新建一个项目，如果这里有不会的同学，可以参考我转载过的文章 http://www.cnblogs.com/Sky-Ice/p/8875958.html vue 脚手架安装及新建项目。 项目建好了，下面，我们进入项目目录，并安装依赖的模块，稍等 几分钟。。 __________________________________________________________________________________________________________________________________________ 好了，依赖的模块安装好了，启动项目。 我们先来看一下项目目录 在src 下新建一个目录 components ， 将我们将要编写的组件存放进去 这里我新建了两个文件，Home 和 Head ，Home为父组件，Head为子组件。 正文： 我们先来看，父子组件之间是如何通信的： 这里，我们是使用单文件组件来实现的，在App.vue 中，如下图所示 使用组件分为两步： 1.使用 import 自定义名称 from "./文件路径" 来引入到当前文件，不引入是不能使用的 2. components:{}中注册组件，v-home 为组件名， Home 要与引入时的自定义名称一致 Home 组件 中代码如图所示 这里

### 自定义指令 directive 全局自定义指令：Vue.directive() 局部自定义指令：directives directive(参数一,参数二) 参数一：指令名称 参数二：指令的配置项，可以是函数，也可以是对象 函数： 参数一：使用当前指令的元素 参数二：指令的详细信息 { modifiers:修饰符（只要自定义指令后面跟了修饰符，modifiers对象中就有值，为true）, value:指令的值（假设指令这样写：<div v-test="'aaa'"></div>，那么value就是aaa） } 指令的作用：操作DOM元素 步骤： ①src下新建utils/utils.js： import Vue from "vue"; /** * v-test指令： * <div v-test="'发发发'"></div> * 相当于 * <div>发发发</div> * */ Vue.directive("test",(el,{value})=>{ el.innerText=value; }); /** * 设置背景颜色的指令 * */ Vue.directive("backgroundColor",(el,{value,...rest})=>{ el.style.backgroundColor=value; }); /** * 阻止浏览器默认事件：v-event

封装 axios 工具，编辑 src/api/index.js 文件 首先，我们要使用 axios 工具，就必须先安装 axios 工具。执行下面的命令进行安装 npm install axios -D 这样，我们就安装好了 axios 工具了。 新建了一个 src/api/index.js // 配置API接口地址 var root = 'https://cnodejs.org/api/v1' // 引用axios var axios = require('axios') // 自定义判断元素类型JS function toType (obj) { return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase() } // 参数过滤函数 function filterNull (o) { for (var key in o) { if (o[key] === null) { delete o[key] } if (toType(o[key]) === 'string') { o[key] = o[key].trim() } else if (toType(o[key]) === 'object') { o[key] = filterNull(o[key]) } else if (toType(o[key]

// App.vue <template> <div id="app"> {{ count }} <button @click="increment">+</button> <button @click="decrement">-</button> </div> </template> <script> import { mapState } from 'vuex'; // import { mapState, mapActions } from 'vuex'; export default { name: 'app', computed: mapState([ 'count' ]), methods: { increment () { // this.$store.commit('increment'); this.$store.dispatch('incrementAsync'); }, decrement () { // this.$store.commit('decrement'); this.$store.dispatch('decrement'); }, testAction () { this.$store.dispatch('actionA'); } } // methods: mapActions([ // 'increment', // 'decrement'