wozhencai-优快云博客

原创 yml基本语法

基本语法： key: value: 表示键值对，冒号后面必须有空格和python语法类似，以空格缩进来控制层级关系属性和值大小写敏感，例如： server: port: 8080 path: /hello 字面量：普通的值（数字，字符串，布尔值）字符串默认不用加单引号或双引号若为双引号，则不会转义特殊字符若为单引号，会转移特殊字符对象、Map（属性和值）先写对象名，另起一行再写每一个属性和值，例如：friends: name: Tom age: 20 如果写在一行里面，

2021-01-05 09:14:53 362

原创 Vue项目中index.html、main.js与App.vue关系

index.html: 这里面的<div id="indexHtmlOfApp"></div>就是即将要挂载vue组件的地方，页面加载时，首先会加载index.html页面，即使区域中有元素，也会被App.vue组件里的元素所替换 App.vue: App.vue是根组件，id是app，所有的组件都可以在此之下定义，通过路由进行跳转页面 main.js 连接了index.html和App.vue的桥梁， import App from './App' import rout

2020-11-03 22:59:20 425

原创 Vue脚手架介绍与基本用法

介绍： vue脚手架自动创建vue+webpack项目，免去繁琐的各种配置和依赖下载详细可见：脚手架官网安装：此命令默认安装最新版： npm install -g @vue/cli 推荐采用3.x以上版本基于3.x版本创建vue项目：基于命令行方式：命令行执行：vue create project_name 会出现默认方式还是手动方式，可通过键盘上下键进行选选择手动方式可以通过空格键进行选中，星号代表已经选中，这里选择可以选择路由 5.选择vue.js版本，默认即可：

2020-10-29 16:19:26 466

原创 Vue组件

组件注册： Vue.component(组件名, { data: 组件数据, template: 组件模板内容 }) 例: Vue.component('button-counter', { data: function(){ return { count: 0 } }, template: '<button> @click="counter"> 点击了{{count}}次></button>', methods: { counter: f

2020-10-26 10:56:32 100

原创 webpack打包发布

在项目上线之前需要将应用整体进行打包，可以通过package.json文件配置打包命令： "scripts": { "build": "webpack -p" } 注意：该命令默认加载项目根目录中的webpack.config.js配置文件

2020-10-23 14:14:33 118

原创 webpack项目中使用vue

install: npm i vue -S 在src->index.js入口文件中，通过 import Vue from 'vue导入vue 创建vue实例对象，并指定要控制的el区域通过render函数渲染app根组件 render函数渲染：导入Vue构造函数：import Vue from ‘vue' 导入App根组件：import App from 'App.vue 实例化对象： const vm = new Vue({ el: '#app', }) render: h =>

2020-10-23 14:06:30 87

原创 postCSS自动添加css兼容前缀

简介：不同的浏览器对样式表的兼容性不一样，需要手动添加浏览器前缀，较为麻烦，使用webpack加载器配置postCSS自动添加css兼容前缀较为方便安装： npm i postcss-loader autoprefixer -D 在项目根目录中创建postcss的配置文件postcss.config.js，并初始化配置： const autoprefixer = require('autoprefixer') module.exports = { plugins: [autoprefixe

2020-10-22 20:39:48 1211

原创 webpack加载器

webpack默认只能打包js文件，对于非js文件只能调用loader加载器才能打包，否则就会出错 loader加载器： less-loader：打包处理.less相关 sass loader：打包处理.sass相关 url-loader：打包处理css中与url路径相关的文件打包.css文件安装加载器 npm i style-loader css-loader -D 2.修改webpack.config.js中的module->rules数组 module.exports = {

2020-10-22 18:45:09 227

原创 webpack基本使用——配置生成预览页面

安装 npm install html-webpack-plugin -D 修改webpack.config.js const HtmlWebpackPlugin = require('html-webpack-plugin');//导入插件 const path = require('path'); //创建插件实例对象 const htmlPlugin = new HtmlWebpackPlugin({ template:'./src/index.html',//指定显示首页 filename: '

2020-10-22 16:38:47 186