使用webpack手动搭建一个 vue-cli

引子

1：请问下面两个创建项目的命令区别是什么？

vue create project

vue init webpack project

2：前端的业务代码与框架代码，工程师与架构师他们的关系是什么？

一，环境

1，需要安装node.js ，安装方式请参考 Node.js 安装配置

2，使用yarn 来创建 package.json 文件管理项目

npm install -g yarn

yarn init -y

二，过程

1，创建项目目录

项目名webpackage-create-vue-cli 的文件目录，并进入项目目录下

md webpackage-create-vue-clicd webpackage-create-vue-cli

在项目目录下创建一个index.html 文件

cd.>index.html //创建index.html 文件

新建src文件夹，在src文件夹下新建components文件件

md src //创建src文件夹
cd src //进入到src文件下
md components //创建组件文件夹
cd .. //退出到项目目录下

为了使编码方便，我们可以使用vscode打开项目

code . //启动vscode打开项目

vscode 打开后的目录界面如下

2，拿vue包

既然我们要做一个 vue的cli ，我们首先得把 vue 的包拿下来

yarn add -D vue

3，拿webpack 和webpack-cli 两个包

我们使用webpack 来做，还需要 webpack 和webpack-cli 两个包

yarn add -D webpack webpack-cli

4，在test.js中引入 vue.esm 模块

在components下新建一个 test.js 的文件

在test.js里面引入 vue.esm 模块，并且实例化一个对象

test.js 代码如下

import VueTest from 'vue/dist/vue.esm'; //引入vue的esm
const vm = new VueTest({el: "#app",data: {},components: {//自己写的一个test 组件test: {data() {return {tips: "我在学前端vue"}},template: '<div>{{tips}}</div>' //组件模版内容}},template: '<div> <test></test> </div>' //挂载 test 组件
})

5，配置webpack.config.js

我们再新建一个webpack 的配置文件 webpack.config.js 最好是手动一个字母一个字母敲一下里面的代码

const path = require("path") //引入node 的path模块
module.exports = {//打包模式mode: 'none', //none ：不压缩，development：开发模式打包，product:正式版压缩方式//入口文件entry: './src/components/test.js',//打包输出的路径output: {path: path.resolve(__dirname, "distTest"),filename: 'indexTest.js'}
}

当前的项目的内容如下图

6, npx 命令 webpack 来打包

现在我们可以使用 npx 命令 webpack 来打包了

npx webpack
Hash: 3f5fcf9785be9ce01d6e
Version: webpack 4.44.1
Time: 532ms
Built at: 2020-09-09 14:24:21Asset     Size  Chunks             Chunk Names
indexTest.js  333 KiB       0  [emitted]  main
Entrypoint main = indexTest.js
[2] (webpack)/buildin/global.js 472 bytes {0} [built]+ 5 hidden modules

这时在我们的项目下就会多一个distTest的文件夹

现在我们就需要在index.html 中引用这个生成的indexTest.js文件

<!DOCTYPE html>
<html><head><title>自己搭建vue-cli</title></head><body><div id="app"></div><!--这个js文件引用不要放 head 中去，html未加载完，会找不到 app 这个div--><script src="./distTest/indexTest.js"></script>
</body></html>

用浏览器访问这个hmtl的效果如下

上面的代码有以下几个问题，

1：开发时每次更新代码后都需要重新打包

2：未区分开正式环境和开发环境

怎么区分呢？我们需要使用webpack-dev-server来做，这个用户开发调试、提供web服务、热更新、接口代理等等

yarn add -D webpack-dev-server

7,npx 来启动 webpack-dev-server

怎么用？我们直接用npx 来启动 webpack-dev-server

npx webpack-dev-server
i ｢wds｣: Project is running at http://localhost:8081/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from F:\GitHub_Code\webpackage-create-vue-cli
i ｢wdm｣: Hash: fef2f0a2dc251cf7cea6
Version: webpack 4.44.1
Time: 1005ms
Built at: 2020-09-09 14:52:21Asset     Size  Chunks             Chunk Names
indexTest.js  667 KiB       0  [emitted]  main
Entrypoint main = indexTest.js[0] multi (webpack)-dev-server/client?http://localhost:8081 ./src/components/test.js 40 bytes {0} [built][1] (webpack)-dev-server/client?http://localhost:8081 4.29 KiB {0} [built][2] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {0} [built][3] (webpack)-dev-server/node_modules/ansi-regex/index.js 135 bytes {0} [built][4] (webpack)-dev-server/client/socket.js 1.53 KiB {0} [built][5] (webpack)-dev-server/client/clients/SockJSClient.js 4.06 KiB {0} [built][7] (webpack)/buildin/global.js 472 bytes {0} [built][9] (webpack)-dev-server/client/overlay.js 3.51 KiB {0} [built]
[15] (webpack)-dev-server/client/utils/log.js 964 bytes {0} [built]
[17] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {0} [built]
[18] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {0} [built]
[21] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {0} [built]
[30] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {0} [built]
[32] ./src/components/test.js 477 bytes {0} [built]
[33] ./node_modules/vue/dist/vue.esm.js 319 KiB {0} [built]+ 22 hidden modules
i ｢wdm｣: Compiled successfully.

在浏览器上访问下 http://localhost:8081/

但是这儿也并没有实时更新（假如你这是改了代码，这里访问刷新还是原来的样子），

原因是 index.html中的js引用路径的问题，直接改为根目录就可以了

不停服务，直接改下代码试试

刷新浏览器就可以看到代码更改后的效果了。感觉是不是很酷哇！！

webpack-dev-server 打包的文件是在内存里面（是在node.js 服务器的端口为8081这个服务下面），这里直接打开index.html 访问（不用localhost:8081）是没有效果的，

到这里，我们解决了上面两个问题中的第一个问题（开发时每次更新代码后都需要重新打包）

8,区分开正式环境和开发环境

接下来我们处理第二个问题（未区分开正式环境和开发环境）

建立一个config文件夹，并建立两个配置文件js

md config  //建立配置文件夹 config
cd config  //进入到config 下
cd.>webpack.development.js //创建开发配置文件
cd.>webpack.production.js //创建开发配置文件

webpack.development.js 内容暂时如下

console.log("这里是开发环境的配置");

webpack.production.js 内容按时如下

console.log("这里是生产境的配置")

我们使用开发环境打包试试看， npx webpack --env.development

 npx webpack --env.development
{ development: true }
这里是开发环境的配置
Hash: 61e376cb0c77639cfc95
Version: webpack 4.44.1
Time: 2276ms
Built at: 2020-09-09 15:46:47Asset      Size  Chunks             Chunk Names
main.js  97.4 KiB       0  [emitted]  main
Entrypoint main = main.js
[0] (webpack)/buildin/global.js 472 bytes {0} [built]+ 5 hidden modulesWARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

你可以看到如下提示

{ development: true }
这里是开发环境的配置

在使用生产环境打包试试

npx webpack --env.production
{ production: true }
这里是生产境的配置
Hash: 61e376cb0c77639cfc95
Version: webpack 4.44.1
Time: 431ms
Built at: 2020-09-09 17:03:39Asset      Size  Chunks             Chunk Names
main.js  97.4 KiB       0  [emitted]  main
Entrypoint main = main.js
[0] (webpack)/buildin/global.js 472 bytes {0} [built]+ 5 hidden modules

这时我们已经实现了将开发和生产分开来配置。那么我们如何用呢。

需要在package.json里面配置scripts 的 dev、build命令

  "scripts": {"dev": "webpack-dev-server --env.development --open","build": "webpack --env.production "}

package.json 内容如下

{"name": "webpackage-create-vue-cli","scripts": {"dev": "webpack-dev-server --env.development --open","build": "webpack --env.production "},"version": "1.0.0","main": "index.js","license": "MIT","devDependencies": {"vue": "^2.6.12","webpack": "^4.44.1","webpack-cli": "^3.3.12","webpack-dev-server": "^3.11.0"}
}

我们执行下 yarn dev

yarn dev
yarn run v1.22.5
$ webpack-dev-server --env.development --open
{ development: true }
这里是开发环境的配置
i ｢wds｣: Project is running at http://localhost:8081/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from F:\GitHub_Code\webpackage-create-vue-cli
i ｢wdm｣: Hash: cd9731aba5cf2c6ac1e7
Version: webpack 4.44.1
Time: 854ms
Built at: 2020-09-09 17:27:05Asset     Size  Chunks             Chunk Names
main.js  708 KiB    main  [emitted]  main
Entrypoint main = main.js

可以看到走的是测试，并启动了浏览器。

运行 yarn build

yarn build
yarn run v1.22.5
$ webpack --env.production 
{ production: true }
这里是生产境的配置
Hash: 61e376cb0c77639cfc95
Version: webpack 4.44.1
Time: 429ms
Built at: 2020-09-09 17:31:23Asset      Size  Chunks             Chunk Names
main.js  97.4 KiB       0  [emitted]  main
Entrypoint main = main.js
[0] (webpack)/buildin/global.js 472 bytes {0} [built]+ 5 hidden modules

9,两套配置文件

现在我们只需要配置两套配置文件中的信息就可以了。

webpack.production.js 中配置如下

console.log("这里是生产境的配置");
const path = require("path"); //引入node 的path模块
module.exports = {//打包模式mode: "production", //none ：不压缩，development：开发模式打包，production:正式版压缩方式//入口文件entry: "./src/components/test.js",//打包输出的路径output: {path: path.resolve(__dirname, "distTest"),filename: "indexTest.js",},
};

webpack.development.js 配置如下

console.log("这里是开发环境的配置");module.exports = {//打包模式mode: "development", //none ：不压缩，development：开发模式打包，production:正式版压缩方式//入口文件entry: "./src/components/test.js",//打包输出的路径output: {filename: "indexTest.js",},
};

现在我们就能通过 yarn dev 命令启动测试，通过 yarn build 打包生产。

也可以使用 npm run dev 和 npm run build 效果与yarn 命令一样。

npm run build> webpackage-create-vue-cli@1.0.0 build F:\GitHub_Code\webpackage-create-vue-cli
> webpack --env.production{ production: true }
这里是生产境的配置
Hash: ad26501974d5b15d17f4
Version: webpack 4.44.1
Time: 440ms
Built at: 2020-09-11 6:56:48Asset      Size  Chunks             Chunk Names
indexTest.js  97.4 KiB       0  [emitted]  main
Entrypoint main = indexTest.js
[0] (webpack)/buildin/global.js 472 bytes {0} [built]+ 5 hidden modules
PS F:\GitHub_Code\webpackage-create-vue-cli>

npm run dev> webpackage-create-vue-cli@1.0.0 dev F:\GitHub_Code\webpackage-create-vue-cli
> webpack-dev-server --env.development --open{ development: true }
这里是开发环境的配置
i ｢wds｣: Project is running at http://localhost:8081/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from F:\GitHub_Code\webpackage-create-vue-cli
i ｢wdm｣: Hash: 2c4f13fbcd6b639e5647
Version: webpack 4.44.1
Time: 1104ms
Built at: 2020-09-11 6:55:16Asset     Size  Chunks             Chunk Names
indexTest.js  708 KiB    main  [emitted]  main
Entrypoint main = indexTest.js
[0] multi (webpack)-dev-server/client?http://localhost:8081 ./src/components/test.js 40 bytes {main} [built]
[./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
[./node_modules/loglevel/lib/loglevel.js] 8.65 KiB {main} [built]
[./node_modules/vue/dist/vue.esm.js] 319 KiB {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8081] (webpack)-dev-server/client?http://localhost:8081 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./src/components/test.js] 507 bytes {main} [built]+ 22 hidden modules
i ｢wdm｣: Compiled successfully.

还没结束，我们发现 index.html 中的js引用在开发和生产环境中引用的路径是不一样的，每次打包生产或者开发调试时都需要改这个js的引用路径。这时我们就要考虑将这个js也弄成配置的，

10,打包html

这时候需要 html-webpack-plugin 插件来处理 html、css、js 的这个配置问题，一起打包了。安装插件

npm  install html-webpack-plugin

拿下来后，我们在 webpack.development.js 和 webpack.production.js 去使用这个插件

webpack.development.js 内容如下

//引入 html-webpack-plugin 插件，处理js，html，css 打包
var HWP=require("html-webpack-plugin")console.log("这里是开发环境的配置");module.exports = {//打包模式mode: "development", //none ：不压缩，development：开发模式打包，production:正式版压缩方式//入口文件entry: "./src/components/test.js",//打包输出的路径output: {filename: "indexTest.js",},plugins:[new HWP({//模版文件template:'index.html',//输出的文件名filename:"index.html"})]
};

webpack.production.js 内容如下

var HWP=require("html-webpack-plugin")
console.log("这里是生产境的配置");
const path = require("path"); //引入node 的path模块
module.exports = {//打包模式mode: "production", //none ：不压缩，development：开发模式打包，production:正式版压缩方式//入口文件entry: "./src/components/test.js",//打包输出的路径output: {path: path.resolve(__dirname, "distTest"),filename: "indexTest.js",},plugins:[new HWP({//模版文件template:"index.html",            //输出的文件名filename:"index.html"})]
};

index.html 中把js引用给注释掉

<!DOCTYPE html>
<html>
<head><title>自己搭建vue-cli</title>
</head>
<body><div id="app"></div><!--这个js文件引用不要放 head 中去，html未加载完，会找不到 app 这个div--><!-- <script src="./indexTest.js"></script> -->
</body>
</html>

这是再执行 yarn dev 或者 npm run dev 启动调试服务

改改 test.js中的内容，

import VueTest from "vue/dist/vue.esm"; //引入vue的esm
const vm = new VueTest({el: "#app",data: {},components: {//自己写的一个test 组件test: {data() {return {tips: "我在学前端vue，哈哈，我更新了,去掉js引用，引入html-webpack-plugin 插件",};},template: "<div>{{tips}}</div>", //组件模版内容},},template: "<div> <test></test> </div>", //挂载 test 组件
});

保存下，直接刷新浏览器就可以看到代码改动后的效果

再看看正式打包的效果

运行 npm run build 或者 yarn build 或者 npx webpack 命令后可以看到多了个distTest 文件夹

但是生成的路径不对，我们改改 webpack.production.js 下的 output的 path

      path: path.resolve(__dirname, "../build"),

再次打包运行 npm run build 或者 yarn build 或者 npx webpack 试试

这里js，打包搞定了，但是我们开发中使用的vue组件做的。

11，plugin扩展

在webpack中，除js和json 的文件需要用到loader去识别，plugin可以扩展功能。

这里我们要用到一下几个插件

npm install vue-html-loader --save  //解析template
npm install vue-loader  --save  //解析vue文件
npm install vue-template-compiler  --save  //编译器，把vue的内容编译出来

接下我们要先加几个文件（main.js，App.vue，Test.vue）

main.js的内容如下

import Vue from "vue/dist/vue.esm"; //引入vue的esm
import App from "./App.vue" //引入vue入口组件
//实例化一个 Vue
new Vue({//元素idel:"#app",//组件components:{App},//模版template:'<div><App><App/></div>'
})

App.vue 内容如下

<template><div><TestVue></TestVue></div>
</template><script>
//引入Test.vue 组件
import TestVue from './components/Test.vue'
export default {components:{TestVue}
}
</script><style>
</style>

Test.vue 内容如下

<template>
<div>
<h2>测试vue组件文件</h2>
<div>{{tips}}</div></div>
</template><script>
export default {data(){return {tips:"我在学vue.."}}
}
</script><style>
</style>

我们还需要改下入口配置 webpack.config.js中

// //入口文件// entry: "./src/components/test.js",//改入口文件 main.jsentry: "./src/main.js",

这是在启动测试

yarn dev
yarn run v1.22.5
$ webpack-dev-server --env.development --open
{ development: true }
这里是开发环境的配置
i ｢wds｣: Project is running at http://localhost:8081/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from F:\GitHub_Code\webpackage-create-vue-cli
i ｢wdm｣: wait until bundle finished: /
× ｢wdm｣: Hash: 7c5c05cd0d08b065bf70
Version: webpack 4.44.1
Time: 995ms
Built at: 2020-09-12 17:27:33Asset       Size  Chunks             Chunk Namesindex.html  277 bytes          [emitted]
indexTest.js    708 KiB    main  [emitted]  main
Entrypoint main = indexTest.js
[0] multi (webpack)-dev-server/client?http://localhost:8081 ./src/main.js 40 bytes {main} [built]
[./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
[./node_modules/ansi-regex/index.js] 135 bytes {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/vue/dist/vue.esm.js] 319 KiB {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8081] (webpack)-dev-server/client?http://localhost:8081 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./src/App.vue] 285 bytes {main} [built] [failed] [1 error]
[./src/main.js] 268 bytes {main} [built]+ 23 hidden modulesERROR in ./src/App.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <template>
|     <div>
|         <TestVue></TestVue>@ ./src/main.js 2:0-27 8:16-19
Child HtmlWebpackCompiler:1 assetEntrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0[./node_modules/html-webpack-plugin/lib/loader.js!./index.html] 574 bytes {HtmlWebpackPlugin_0} [built]
i ｢wdm｣: Failed to compile.

报错了，我们没配置loader，到webpack.config.js 中加入vue-loader的配置

 //loader 配置module:{rules:[{test:/\.vue$/,use:"vue-loader"}]},

webpack.config.js 内容如下

const path = require("path"); //引入node 的path模块
// module.exports = {
//     //打包模式
//     mode: 'none', //none ：不压缩，development：开发模式打包，production:正式版压缩方式
//     //入口文件
//     entry: './src/components/test.js',
//     //打包输出的路径
//     output: {
//         path: path.resolve(__dirname, "distTest"),
//         filename: 'indexTest.js'
//     }
// }module.exports = (evn) => {console.log(evn); //evn = evn || {}; //为null时，就返回一个空对象return {// //入口文件// entry: "./src/components/test.js",//改入口文件 main.jsentry: "./src/main.js",//loader 配置module:{rules:[{test:/\.vue$/,use:"vue-loader"}]},//这儿判断下 是否为开发环境，入过是开发环境 就是用 webpack.development.js 文件的配置，否则是用 webpack.production.js 文件的配置...(evn.development ?require("./config/webpack.development") :require("./config/webpack.production")),};
};

同时需要在webpack.development.js 和 webpack.production.js 中引入 vue-loader的插件并使用

//引入 html-webpack-plugin 插件，处理js，html，css 打包
var HWP=require("html-webpack-plugin")
//引入vue-loader 的插件 处理vue 的组件
var VLP=require('vue-loader/lib/plugin')
console.log("这里是开发环境的配置");module.exports = {//打包模式mode: "development", //none ：不压缩，development：开发模式打包，production:正式版压缩方式// //入口文件// entry: "./src/components/test.js",//入口文件entry: "./src/main.js",//打包输出的路径output: {filename: "indexTest.js",},plugins:[new HWP({//模版文件template:'index.html',//输出的文件名filename:"index.html"}),new VLP()]
};

var HWP=require("html-webpack-plugin")
//引入vue-loader 的插件 处理vue 的组件
var VLP=require('vue-loader/lib/plugin')
console.log("这里是生产境的配置");
const path = require("path"); //引入node 的path模块
module.exports = {//打包模式mode: "production", //none ：不压缩，development：开发模式打包，production:正式版压缩方式// //入口文件// entry: "./src/components/test.js",    //入口文件entry: "./src/main.js",//打包输出的路径output: {//path: path.resolve(__dirname, "distTest"),path: path.resolve(__dirname, "../build"),filename: "indexTest.js",},plugins:[new HWP({//模版文件template:"index.html",            //输出的文件名filename:"index.html"}),new VLP()]
};

再次运行 yarn dev

yarn build 后可看到打包后的文件

以上基本实现了开发与生产配置分离

12，去扩展名

我们还得处理扩展名，比如我们在引入js，json ，vue 文件时默认不去写扩展名

在webpack.config.js中添加配置

resolve:{//默认扩展名extensions:['.js','.json','.vue']},

这时我们可以去掉引用中扩展名了

这里也有些细节的东西要注意，比如我们这里的有一个为test.js 文件，有个Test.vue文件，这里不管理引用时是大写还是小写都默认读的是test.js文件的内容。应为html的所有标签内容都会转为小写。https://cn.vuejs.org/v2/style-guide/ 可以在这里去看看一些规范写法。不要想我这儿哦乱写一通，问题不好分析。

13，取别名

在main.js 中还有个

import Vue from "vue/dist/vue.esm"; //引入vue的esm

我们也看不惯，太长了还带后缀名，处理下吧

在 webpack.config.js下，配置alias（别名），

resolve:{//默认扩展名extensions:['.js','.json','.vue'],alias:{vue: "vue/dist/vue.esm"; //引入vue的esm}},

就把原来的改为这样

import Vue from "vue"; //引入vue的esm

14，css-loader,style-loader

处理css ，

我们在tips 的 div 上加个样式

<template>
<div>
<h2>测试vue组件文件</h2>
<div class="tips">{{tips}}</div></div>
</template><script>
export default {data(){return {tips:"我在学vue.."}}
}
</script><style scoped>
.tips{color:red}
</style>

但是会报错

这是因为没对css 做loader 处理，先安装css-loader style-loader

npm install css-loader style-loader --save

配置webpack.config.js

//loader 配置module:{rules:[{test:/\.vue$/,use:"vue-loader"},//这儿要 注意 两个loader 的 顺序，【componse 组合函数，从右边往左边，要是pipe 函数就是 从左边往右边】{test:/\.css$/,use:["style-loader","css-loader"]}]},

启动看下效果

到这里我们几乎没有用 vue-cli 脚手架，几乎全手动写webpack的配置。

源码：https://github.com/oopxiajun/webpack-create-vue-cli.git

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

jzoj 6797. 【2014广州市选day2】hanoi
Description 你对经典的hanoi塔问题一定已经很熟悉了。有三根柱子，n个大小不一的圆盘，要求大盘不能压在小盘上，初始时n个圆盘都在第一根柱子上，最少要多少步才能挪到最后一根柱子上？ 现在我们来将hanoi塔扩展一下&…...
2024/4/28 6:44:52
纯CSS3制作正方体
CSS3 3D 转换 3D 转换 CSS3 允许您使用 3D 转换来对元素进行格式化。 rotateX() x轴旋转，围绕其在一个给定度数X轴旋转的元素。 div {transform: rotateX(120deg);-webkit-transform: rotateX(120deg); /* Safari 与 Chrome */ }rotateY() y轴旋转，围…...
2024/4/25 7:01:36
攻防世界pwn高手进阶区 exp
dice_game from pwn import * from ctypes import *lo remote(220.249.52.133,45069) #lo process(./dice_game) lib cdll.LoadLibrary("libc.so.6") lib.srand(1) #定义种子的值为1#for i in range(50): # num lib.rand()%6 1 # print num payload a*(0x50-0…...
2024/4/28 8:13:56
java基础注解——2020/09/11
代码文档中的一些注解解释自定义注解反射自定义校验先定义注解类 package com.zs.anotation;import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;Retent…...
2024/4/26 1:53:11
zabbix安装中文语言包及中文乱码的解决(zabbix5.0)
目录一、zabbix不能配置中文界面的问题 1、系统安装后，web界面不能选择使用中文 2、解决问题：手动安装中文语言包: 3、安装完成后，回到web页面，刷新二、zabbix5.0切换到中文界面后，部分在图片上显示的文字会出现…...
2024/4/24 23:13:04
1.单例模式
单例模式 1.定义所谓单例,就是整个程序有且仅有一个实例。该类负责创建自己的对象,同时要确保只有一个对象被创建。好处:就是一个类你只能创建一个实例对象可以节约内存开销,一般常用于在工具类的实现(之前的静态方法也可以用于工具类的实现)。 2.特点构造器私有持有自…...
2024/4/28 7:12:37
深入了解Spring源码9：Spring事务源码剖析
声明式事务使用 Spring事务是我们日常工作中经常使用的一项技术，Spring提供了编程、注解、aop切面三种方式供我们使用Spring事务，其中编程式事务因为对代码入侵较大所以不被推荐使用，注解和aop切面的方式可以基于需求自行选择，我…...
2024/4/26 0:24:03
Java堆
Java堆特点： Java堆是虚拟机所管理的内存中最大的一块内存区域他是所有线程共享的内存区域它的生命周期会随着虚拟机的启动而创建，关闭而销毁在Java世界中，几乎所有的对象实例都在这里分配内存它被实现的时候，可以被定义为固定…...
2024/4/24 23:24:37
jdbc方式连接hive
进入下面目录 cd /root/soft/hive-1.2.1/bin [rootzjj101 bin]# hiveserver2运行完了就卡在这里了, 因为hiveserver2是一个前台进程. jdbc客户端连接 pom 依赖 <dependencies><dependency><groupId>org.apache.logging.log4j</groupId><artifactI…...
2024/4/28 0:12:24
LeetCode 637.二叉树的层平均值
题目： 给定一个非空二叉树, 返回一个由每层节点平均值组成的数组。示例 1： 输入： 3 / 9 20 / 15 7 输出：[3, 14.5, 11] 解释： 第 0 层的平均值是 3 , 第1层是 14.5 , 第2层是 11 。因此返回 [3, 14.5, 11] 。 ta…...
2024/4/27 22:37:51
集合复习整理——2020/09/11
一、集合大纲原文：https://blog.csdn.net/feiyanaffection/article/details/81394745?ops_request_misc%257B%2522request%255Fid%2522%253A%2522159979069619724835801761%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id15997…...
2024/4/27 11:04:27
linux各种重启方式
1、reboot 普通重启 2、shutdown -r now 立刻重启(root用户使用) 3、shutdown -r 10 过10分钟自动重启(root用户使用) 4、shutdown -r 20:35 在时间为20:35时候重启(root用户使用)...
2024/4/23 8:32:10
LIO-SAM: Tightly-coupled Lidar Inertial Odometry via Smoothing and Mapping.md
LIO-SAM是一个使用因子图融合激光，IMU和GPS信息的SLAM算法。论文依次介绍了IMU，激光关键帧，GPS和回环节点。 IMU约束使用IMU预积分作为里程计的初值，并作为因子图的节点。激光里程计在位移和旋转超过阈值时，创建新…...
2024/4/25 3:22:05
Join在MapReduce中的实现
1、ReduceJoin流程分析数据通过Mapper加载过来，然后经过shuffle阶段，在Reduce端完成真正的Join操作 2、ReduceJion功能的实现 Mapjoin实现原理有些数据比较小，是否有必要经过shuffle,shufflt是大数据中最耗时最耗资源的，…...
2024/4/1 17:40:12
「每日一道面试题」 - （一）
引言本文已收录在Github，欢迎Star。每天的积累只为更好的将来。你的每一个star，都是对我的鼓励！ 正文 1、vue中computer与watch区别解析：第1题讨论：欢迎讨论 2、你了解哪些跨域解决方法解析：第2题…...
2024/4/25 1:53:16
linux各种关机方式
1、halt 立刻关机 2、poweroff 立刻关机 3、shutdown -h now 立刻关机(root用户使用) 4、shutdown -h 10 10分钟后自动关机...
2024/4/24 17:02:45
脑数据有多重要？脑机接口有哪些商业应用？
全文共4409字，预计学习时长12分钟图源：unsplash 人类想象无限，脑机接口（BCI）可以用来做什么呢？在过去的六个月里，我一直在研究为运动员设计的非侵入式BCI。本文将依据个人经验从商业视角帮助大…...
2024/4/28 7:40:44
JavaScript作用域和作用域链知多少
前言： 本篇文章向大家分享一下作用域和作用域链，希望对大家有所帮助！ 作用域： 作用域就是代码的执行环境，全局执行环境就是全局作用域，函数的执行环境就是函数作用域(私有作用域)，他们都是栈内…...
2024/4/26 2:14:02
力扣Java版个人代码分享-数组篇(215. 数组中的第K个最大元素)
215. 数组中的第K个最大元素在未排序的数组中找到第 k 个最大的元素。请注意，你需要找的是数组排序后的第 k 个最大的元素，而不是第 k 个不同的元素。例子示例 1:输入: [3,2,1,5,6,4] 和 k 2 输出: 5 示例 2:输入: [3,2,3,1,2,4,5,5,6] 和 k 4 输…...
2024/4/25 9:28:37
赢咖3-首页
点击这里完成注册我在文章里添加导出链接，会自动加上一个nofollow标签，如果自己定义了标签dofollow，会出现更奇怪的情况。实际如下： 在文章里添加导出链接： a href“https://abc.com”>xxx则在前台显示会出现该锚文…...
2024/4/1 17:12:19