vue - 随笔分类(第3页) - thomas_blog

vue router mode

摘要：index.js import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' Vue.use(Router) export default new Rou 阅读全文

posted @ 2021-07-08 14:12 thomas_blog 阅读(187) 评论(0) 推荐(0) 编辑

vue router

摘要：Furong.vue <template> <div id="Furong"> <p>{{msg}}</p> </div> </template> <script> export default { name: 'Furong', data() { return { msg: 'hello furo 阅读全文

posted @ 2021-07-08 14:02 thomas_blog 阅读(33) 评论(0) 推荐(0) 编辑

vuecli脚手架

摘要：install cnpm i -g @vue/cli 创建一个新项目 vue create hello-world 拉取 2.x 模板 (旧版本) npm install -g @vue/cli-init # `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同 vue init 阅读全文

posted @ 2021-07-07 19:15 thomas_blog 阅读(22) 评论(0) 推荐(0) 编辑

webpack-dev-server

摘要：server cnpm install webpack-dev-server --save-dev package.json "scripts": { "build": "webpack", "dev": "webpack-dev-server --inline --host localhost - 阅读全文

posted @ 2021-07-07 18:44 thomas_blog 阅读(19) 评论(0) 推荐(0) 编辑

webpack丑化插件

摘要：plugin cnpm install uglifyjs-webpack-plugin --save-dev webpack.config.js const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); plugins: [ new Ugl 阅读全文

posted @ 2021-07-07 17:48 thomas_blog 阅读(171) 评论(0) 推荐(0) 编辑

webpack自动生成html

摘要：所有依赖，自动生成 plugin cnpm i --save-dev html-webpack-plugin webpack.config.js const HtmlWebpackPlugin = require("html-webpack-plugin"); output: { // 手动修改ht 阅读全文

posted @ 2021-07-07 17:39 thomas_blog 阅读(52) 评论(0) 推荐(0) 编辑

webpack vue

摘要：Loaders cnpm install vue-loader@14 vue-template-compiler --save-dev webpack.config.js module: { rules: [{ test: /\.vue$/, use: ['vue-loader'] }], }, A 阅读全文

posted @ 2021-07-07 16:44 thomas_blog 阅读(33) 评论(0) 推荐(0) 编辑

webpack vue

摘要：Loaders cnpm install vue --save webpack.config.js resolve: { // 解决运行时报错 alias: { 'vue$': 'vue/dist/vue.esm.js' } } 使用 import Vue from "vue"; 阅读全文

posted @ 2021-07-07 14:36 thomas_blog 阅读(23) 评论(0) 推荐(0) 编辑

webpack ES6转ES5

摘要：浏览器适配 Loaders cnpm install babel-loader@7 babel-core babel-preset-es2015 --save-dev webpack.config.js { test: /\.m?js$/, exclude: /(node_modules|bower 阅读全文

posted @ 2021-07-07 14:07 thomas_blog 阅读(127) 评论(0) 推荐(0) 编辑

webpack使用图片

摘要：使用url body { background: url("../img/test.jpg"); } loader cnpm install url-loader --save-dev cnpm install file-loader --save-dev webpack.config.js mod 阅读全文

posted @ 2021-07-07 12:32 thomas_blog 阅读(42) 评论(0) 推荐(0) 编辑

webpack使用less

摘要：cnpm install less less-loader --save-dev module.exports = { module: { rules: [ { test: /\.less$/i, use: [ { loader: 'style-loader', }, { loader: 'css- 阅读全文

posted @ 2021-07-07 11:25 thomas_blog 阅读(195) 评论(0) 推荐(0) 编辑

webpack使用css

摘要：cnpm install webpack@^5.23.0 --save-dev cnpm i webpack-cli@^4.5.0 --save-dev cnpm i less-loader@6.0.0 --save-dev cnpm i style-loader --save-dev cnpm i 阅读全文

posted @ 2021-07-07 11:01 thomas_blog 阅读(50) 评论(0) 推荐(0) 编辑

webpack本地和全局

摘要：终端使用webpack命令，使用的是全局 package.json中定义，使用的是本地终端使用本地路径的webpack，使用的是本地阅读全文

posted @ 2021-07-06 20:01 thomas_blog 阅读(131) 评论(0) 推荐(0) 编辑

ES模块化导入导出

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <!-- 模块化类型阅读全文

posted @ 2021-07-06 17:05 thomas_blog 阅读(66) 评论(0) 推荐(0) 编辑

vue作用域插槽

摘要：父组件通过子组件数据，替换插槽数据 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> 阅读全文

posted @ 2021-07-06 14:53 thomas_blog 阅读(100) 评论(0) 推荐(0) 编辑

vue具名插槽slot