![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
小虾米的成长之路
幸运往往跟实力成正比,实力也往往和努力成正比!
展开
-
Vue学习18.2-----webpack打包处理scss文件
1、运行npm i sass-loader node-sass -D2、配置webpack.config.js文件const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin');//创建插件的实例对象const htmlPlugin = new HtmlWebpac...原创 2020-05-06 20:15:54 · 757 阅读 · 0 评论 -
Vue学习18.1-----webpack打包处理less文件
1、运行npm i less-loader less -D2、配置webpack.config.js文件const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');//创建插件的实例对象const htmlPlugin = new HtmlWebpackPlugi...原创 2020-01-08 17:18:52 · 385 阅读 · 2 评论 -
Vue学习18-----webpack打包处理css文件
1、新建css文件li{ list-style: none;}2、引入css样式、运行import'./css/ys.css'3、运行后报错4、执行npm i style-loader css-loader5、配置webpack.config.jsconst path = require('path');const HtmlWebp...原创 2020-01-08 17:00:42 · 526 阅读 · 0 评论 -
Vue学习13.1----- ES6模块化的基本语法 按需到导出和按需导入
1、按需导出bl.jsexport default 默认导出let a = 10;let b = 20;let c= 30;function d(){ console.log('111111111')}//默认导出export default{ a,b,d}//按需导出export let s1 ='s1';export let s2 ='s...原创 2020-01-07 13:49:50 · 177 阅读 · 0 评论 -
Vue学习17-----webpack的基本应用之运行后自动打开浏览器
1、安装预览插件npm i html-webpack-plugin -D2、webpack.config.js下配置//导入生成预览页面的插件,得到一个构造函数const HtmlWebpackPlugin = require('html-webpack-plugin')//创建插件的实例对象const htmlPlugin = new HtmlWebpackPlugin({...原创 2019-11-08 21:41:11 · 346 阅读 · 0 评论 -
Vue学习16-----webpack的基本应用之配置自动打包
1、执行npm i webpack-dev-server -D2、修改package.json中scripts中的dev命令{ "name": "WEBPACK_STUDY", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"E...原创 2019-11-08 13:45:26 · 166 阅读 · 0 评论 -
Vue学习15-----webpack的基本应用之配置打包的入口和出口
1、打包的入口文件未src->index.js2、打包的输出文件未dist->main.js更改打包的入口与出口需要修改webpack.config.js下的配置信息:const path = require('path')module.exports = { //编译模式 mode:'development',//development produc...原创 2019-11-07 01:33:49 · 456 阅读 · 0 评论 -
Vue学习14-----webpack基本使用之实现隔行变色
1、初始化包配置文件管理配置文件npm init -y2、创建一个src文件夹3、创建一个index.html,引入index.js4、index.html创建ul、li ul>li{这是第$个li}*95、安装jqnpm i jquery -s6、创建index.jsimport $ from 'jquery'$(function(){ ...原创 2019-11-06 18:24:07 · 646 阅读 · 0 评论 -
Vue学习13-----安装babel
1、终端中打开文件夹2、执行(1)npm install --save-dev @babel/core @babel/preset-env @babel/node(2)npm install --save @babel/polyfill3、若断网等原因出现报错时e:\Vue\ES6MKH>npm install --save-dev @babel/core @bab...原创 2019-11-06 12:19:29 · 2197 阅读 · 0 评论 -
Vue学习12-----过滤器之私有过滤器
PS:过滤器执行顺序符合就近原则:即:当私有过滤器和全局过滤器重名时,执行的是私有过滤器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,...原创 2019-11-03 13:42:42 · 178 阅读 · 0 评论 -
Vue学习11-----过滤器之全局过滤器
<!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...原创 2019-11-03 13:21:03 · 123 阅读 · 0 评论 -
Vue学习10-----增删查
<!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...原创 2019-11-03 11:37:24 · 149 阅读 · 0 评论 -
Vue学习09-----简单的增删
<!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...原创 2019-11-03 01:50:08 · 120 阅读 · 0 评论 -
Vue学习08-----v-if和v-show
<!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...原创 2019-10-27 18:39:00 · 145 阅读 · 0 评论 -
Vue学习07-----v-for
<!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...原创 2019-10-27 17:48:24 · 153 阅读 · 0 评论 -
Vue学习06-----CSS样式
1、class样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht...原创 2019-10-27 12:27:49 · 400 阅读 · 0 评论 -
Vue学习05-----v-model
<!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...原创 2019-10-27 01:39:12 · 101 阅读 · 0 评论 -
Vue学习04-----v-bloak和v-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-...原创 2019-10-25 13:23:15 · 443 阅读 · 0 评论 -
Vue学习03-----v-on
<!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-...原创 2019-10-25 00:21:38 · 119 阅读 · 0 评论 -
Vue学习02-----v-bind
<!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-...原创 2019-10-23 18:50:43 · 148 阅读 · 0 评论 -
Vue学习01-----MVVM的对应关系
<!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...原创 2019-10-20 17:26:06 · 298 阅读 · 0 评论 -
Vue中的MVVM
<!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-Compatibl...原创 2019-06-05 00:51:19 · 736 阅读 · 0 评论 -
零基础导入Vue项目
1、前几天自从搭建完Vue后,能跑的通demo后,却不知道用啥做这个开发合适,其中推荐一下Vs Code,不是很大却很方便,需要的配置也不是很多。(Sublime Text 3 电脑不大行,我没有装上插件。Hbulider 也不是很好用)Vs Code下载地址:https://code.visualstudio.com/2、安装(这个……干就完事)3、装完了吧,英文的吧,搞不了了吧...原创 2019-03-28 19:34:41 · 4878 阅读 · 0 评论 -
从零开始搭建一个Vue项目
Vue.js是现在比较优秀的Web前端框架,下面开始从零开始搭建一个Vue项目。流程如下:一、安装node.js1.进入node.js官网下载相应安装包:https://nodejs.org/en/安装过程没有什么要注意的地方,直接安装到自己想安装到的目录里面就可以了2.安装完成以后,打开命令行,输入node -v来判断是否安装成功3.在安装node的时候...原创 2019-03-26 14:55:15 · 7878 阅读 · 1 评论 -
IDEA安装vue开发插件
作者:PC.aaron出处:http://www.cnblogs.com/aaron-pan/1.File>settings2.Plugins>输入vue>Search in repositories(在仓库中搜索)3.重启idea即可转载 2019-02-28 08:26:03 · 6411 阅读 · 0 评论