一、NodeJS改变了前端开发 - 利用webpack实现模块化开发
NodeJS诞生于2009年，作者是Ryan Dahl，目的是为JS赋能。
NodeJS改变了前端开发的模式，为什么？？
NodeJS有很多工具，比如less翻译、webpack打包工具等等。
webpack
二、安装开发工具
npm install -g webpack
npm install -g webpack-cli
创建circle.js文件
export const mianji = r => 3.14 * r * r;
export const zhouchang = r => 2 * 3.14 * r;
main.js
import {mianji, zhouchang} from './circle.js';
var result = mainji(10);
document.getElementById('app').innerHTML =
'很好，圆的面积是' + result;
这种编程模式，叫做模块化开发。
但是，浏览器如果直接用script标签引入模块化开发的js文件，不认识import、不认识export、不认识{}等等。
解决方法：是用webpack进行打包，打出来的js文件就不含有import、export了，就变为浏览器兼容的js文件了。
文件配置
const path = require('path');
module.exports = {
// 打包模式，development不加密，打包快；
// production生产模式，在服务器上部署了，加密、打包慢
mode: 'development',
// 入口，从哪个文件开始打包
entry: './app/main.js',
// 出口，打包到什么地方
output: {
// 文件名
filename: 'bundle.js',
// 路径
path: path.resolve(__dirname, 'dist')
}
}
三、技术栈升级
webpack-dev-server
npm install -g webpack-dev-server
改变webpack.config.js
module.exports = {
// 打包模式，development不加密，打包快；
// production生产模式，在服务器上部署了，加密、打包慢
mode: 'development',
// 入口，从哪个文件开始打包
entry: './app/main.js',
// 出口，打包到什么地方
output: {
// 文件名
filename: 'bundle.js',
// 虚拟路径
publicPath: 'xuni'
}
}
创建身份证文件
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"dev": "webpack-dev-server"
},
"author": "",
"license": "ISC"
}
改变index.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-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="xuni/bundle.js"></script>
</body>
</html>
然后运行文件
npm run dev
127.0.0.1:8080
四、技术栈升级 - CSS-loader
css-loader
webpack天生只认识js文件和json文件。
比如，我们尝试书写
import './css.css'
会引发报错：
没有编译css文件
为了让webpack能够认识css文件，必须安装css-lader。
npm install --save css-loader
npm install --save style-loader
配置手册：<u>https://www.npmjs.com/package/css-loader</u>
改变webpack.config.js
module.exports = {
// 打包模式，development不加密，打包快；
// production生产模式，在服务器上部署了，加密、打包慢
mode: 'development',
// 入口，从哪个文件开始打包
entry: './app/main.js',
// 出口，打包到什么地方
output: {
// 文件名
filename: 'bundle.js',
// 虚拟路径
publicPath: 'xuni'
},
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
}
]
}
}
四、技术栈升级 - Vue-loader
vue-loader
安装依赖
npm install --save vue-loader
npm install --save vue-template-compiler
vue-template-compiler表示vue的模板编译器，与webpack共同工作的时候。
再次改变webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
// 打包模式，development不加密，打包快；
// production生产模式，在服务器上部署了，加密、打包慢
mode: 'development',
// 入口，从哪个文件开始打包
entry: './app/main.js',
// 出口，打包到什么地方
output: {
// 文件名
filename: 'bundle.js',
// 虚拟路径
publicPath: 'xuni'
},
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
// 请确保引入这个插件！
new VueLoaderPlugin()
]
}
六、Vue的Hello World
安装依赖
npm install --save vue
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
// 打包模式，development不加密，打包快；
// production生产模式，在服务器上部署了，加密、打包慢
mode: 'development',
// 入口，从哪个文件开始打包
entry: './app/main.js',
// 出口，打包到什么地方
output: {
// 文件名
filename: 'bundle.js',
// 虚拟路径
publicPath: 'xuni'
},
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
// 请确保引入这个插件！
new VueLoaderPlugin()
],
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
}
由于loader装了3个，webpack有一个问题，就是必须在项目中重新安装webpack。
npm install --save webpack
<template>
<div>
<h1>你好，我是Vue</h1>
</div>
</template>
<script>
export default {
data(){
return {
r: 100,
g: 200,
b: 123
}
}
}
</script>
<style scoped>
h1{
color:red;
}
.box{
width:200px;
height:200px;
border:1px solid red;
}
</style>
vue起步成功
总结：安装的依赖
npm install --save css-loader
npm install --save style-loader
npm install --save vue-loader
npm install --save vue-template-compiler
npm install --save vue
npm install --save webpack
文件结构
七、Vue的起步文件和根组件说明
main.js
import Vue from 'vue';
new Vue({
// 挂载点，element launcher
el: '#app',
// 渲染函数
render(){
}
});
new Vue的时候，要提供一个对象，对象有两个参数。
- el挂载点
- render渲染函数
一个Vue的组件由三部分组成： - template： 放结构的，HTML在这里面写
- script： 放程序的，JS在这里面写
- style: 放样式的，CSS在这里面写
比如：
<template>
<div>
<h1>你好我是Vue，很高兴遇见你</h1>
</div>
</template>
<script>
export default {
}
</script>
<style>
h1{
color:blue;
}
</style>
改变main.js文件，引入这个vue文件
import Vue from 'vue';
import App from './App.vue';
new Vue({
// 挂载点，element launcher
el: '#app',
// 渲染函数
render(h){
return h(App);
}
});
image.png
网友评论