写这篇文章的目的,更多是让自己更熟悉vue-cli脚手架创建项目的依据和项目结构,其次是希望我的学习过程可以帮到有疑惑的同学,有什么错误还希望可以得到指教
为什么要分上、下,因为最近学习react.js,发现项目框架除了使用的js库不同(vue.js、react.js),配置基本上是大同小异的
这也是我占坑(脸大)的理由
徒手撸个vue项目框架(上)
徒手撸个vue项目框架(下)
徒手撸个react项目框架(上)
徒手撸个react项目框架(下)
一、准备工作
1.新建vueProject文件夹
进入根目录,初始化项目
cd vueProject
npm init -y // -y是采用默认配置
此时目录出现package.json文件
2.创建项目结构
在根目录下新建src文件夹,在src下暂时新建名为index的js文件作为入口文件
根目录下创建一个index.html,作为入口页面
3.使用webpack
下载webpack时你可能会出现无限下载webpack-cli的问题,这是因为你没有先全局安装webpack和webpack-cli的原因
// webpack4.X开始webpack-cli被提出来作为一个独立的包了
// 在下载webpack同时也要下载webpack-cli,且必须同时下载否则会报错,因为版本不匹配
cnpm install webpack-cli webpack --save-dev
webpack默认只能打包js模块,它可以将你写的多个js模块打包成一个js文件,最后在入口页面引入它
webpack4开始默认大于配置,换句话说可以不用再引入一个配置文件来打包项目,因此他有很多默认值
默认入口文件是src下的index.js,输出为dist目录下的main.js(假如没有dist目录会自动创建)
但是它仍然是高配置的,假如需要我们只需在项目根目录下新建webpack.config.js来进行一切的配置
相比于webpack4之前的版本,它的配置项多出一个mode选项,可选值为"development" 或 “production”(默认),它们的区别就是development打包输出的文件不是压缩版本的
4.使用vue.js
cnpm install vue@2 --save-dev
index.js中
// index.js
import Vue from 'vue'
new Vue({
el: '#app',
msg: 'hello vue'
})
index.html中
// index.html
<div id ="app">{{msg}}</div>
使用webpack打包,将打包后的文件引入页面,打开浏览器运行,此时会报如下警告
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available.
Either pre-compile the templates into render functions, or use the compiler-included build.
(found in <Root>)
这是因为vue有两种构建版本的代码:完整版和只包含运行时版,完整版是包含编译器和运行时
解决方案多种多样的,官方做法是给vue设置别名
// webpack.config.js
module.exports = {
// ...
resolve: {
alias: {
vue$: "vue/dist/vue.esm.js" // 这里根据你使用的版本引入vue/dist 下对应的版本就行
}
}
};
添加如上配置打包后,刷新浏览器,可以正常显示msg的值了
这里准备工作已经完成了,但是功能太捉急了,所以接下来就是webpack的施展才华的时候了
二、完善框架功能
1.使用webpack-dev-server
每次写完新的内容要想看到效果,就必须使用webpack进行打包,我们更希望当代码改变时自动打包编译
webpack-dev-server可以帮我们做到!
a.下载
cnpm i webpack-dev-server --save-dev
b.使用
假如像使用webpack命令一样使用使用webpack-dev-server是局部安装的,使用局部安装的包,是完全行不通的,因为命令行里只能使用全局安装的包,
webpack-dev-server是局部安装的,使用局部安装的包,我们需要使用在package.json中配置scripts
// package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server"
},
然后再命令行使用npm run dev
npm run dev
注意看下面的节选的代码
npm run dev
> vueproject@1.0.0 dev C:\myProject\vueProject
> webpack-dev-server
i 「wds」: Project is running at http://localhost:8080/
i 「wds」: webpack output is served from /
i 「wds」: Content not from webpack is served from C:\myProject\vueProject
i 「wdm」: Hash: e70fb3ae9bf074915cad
Version: webpack 4.35.0
从这里我们知道两件事:
首先,我们的项目运行在本机8080端口,其次webpack的output输出在根目录下,所以记得修改index.htmlmain.js的路径,否则你是看不到新的效果的
但是我们在根目录下并没有看到这个文件,这是因为它被放在内存中(这样的读写速度快),而不是磁盘中,另外我们还可以修改端口,甚至可以在编译完成后自动打开浏览器
它具体的配置可以是在webpack的devServer项
devServer:{
host: '127.0.0.1',
port: 8080,
open: true
}
也可以是在cli里,这是最暴力的方式,但是端口还是放在devServer里,方便以后项目的配置
// package.json
"scripts": {
"dev": "webpack-dev-server --open --port 30000"
},
2.使用html-webpack-plugin
既然将main.js放在内存中可以加快读写速度,那是不是把页面放在内存中可以进一步加快读写速度了?
答案是肯定的!使用html-webpack-plugin就可以做到
a.下载
cnpm i html-webpack-plugin --save-dev
b.使用
// webpack.config.js
const htmlWebpackPlugin = require('html-webpack-plugin')
...
plugins: [
new htmlWebpackPlugin({
template: path.join(__dirname, "./index.html"),
filename: "index.html"
})
],
上面的代码是根据磁盘中的index.html在内存中生成一个index.html,我们在浏览器中审查页面发现会多一个script标签,这是插件自动将内存中的main.js加入到内存页面中了,所以我们这是应该删除手动添加的script标签
// index.html
<body>
<div id="app">
<h1>{{ msg }}</h1>
</div>
<!--删除或者注释掉 <script src="./main.js"></script> -->
</body>
三、继续完善框架(项目)功能
到目前为止框架已经可以自己监听改变作出反应了,但是就vue本身来说还是很简陋的,它还没有有组件功能,也无法编译样式,等等。前面说过,webpack默认是只能处理js文件的,但是loader使得webpack可以处理更多类型的文件。接下来使用loader继续完善它
1. 组件功能vue-loader
组件功能是vue特有的生态vue-loader,官网中可以看到,它配合vue-template-compiler,将组件中的html、js、css单独提出来交给相应的loader处理
a.下载
两个loader都需要下载
cnpm i vue-loader vue-template-compiler --save-dev
b.使用
在webpack.config.js中
module: {
rules: [{ test: /\.vue$/, use: "vue-loader" }]
},
如果仅是如此设置,浏览器啊会报错
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
这是因为vue-loader和别的loader不一样,他必须要有一个插件支持,这个插件在./node_modules/vue-loader/lib/plugin下,官网给出示例:
const VueLoaderPlugin = require("./node_modules/vue-loader/lib/plugin");
module: {
rules: [{ test: /\.vue$/, use: "vue-loader" }]
},
plugins: [
...
new VueLoaderPlugin(),
...
],
2.处理样式
处理样式使用的是css-loader和style-loader
a.下载
cnpm i css-loader style-loader -save-dev
b.使用
module: {
rules: [
...
{ test: /\.css$/, use: ["style-loader", "css-loader"] }
]
},
但是项目中我们可能使用less或sass等写样式,道理是一样的,它也有自己的loader
a.下载
cnpm i less-loader -save-dev
b.使用
module: {
rules: [
...
{ test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] }
{ test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"] }
]
},
3.处理图片
.test{
background-image: url(../imgs/11.jpg);
}
当我们在组件的style中使用url()会报错,因为vue-loader无法处理url,这时就需要使用url-loader
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file
a.下载
url-loader内部使用了file-loader,所以两个loader要同时下载
cnpm i url-loader file-loader --save-dev
b.使用
基本的使用如下
module: {
rules: [
...
{ test: /\.(jpg|png|jpeg|gif|bmp)$/, use: "url-loader" } // 包括字体、视频格式
]
},
c.options
细心的同学会发现,虽然图片可以显示了但是审查元素时发现,图片的名称和路径变化了,
这是因为url-loader会将图片编译到内存中,并且给它设定一个哈西值作为身份标识,当第二次用到这个文件时直接调用它,而不是在次编译
一般它后面可以放一个options对象,可以控制当图片的l字节大小大于limit属性时触发某些期望的设置
module: {
rules: [
{
test: /\.(jpg|png|jpeg)$/,
use: {
loader: "url-loader",
options: {
limit: 8000, // 当文件字节大小超过限定值时触发后面的设置
name: "[hash:8]-[name].[ext]" // 这是在原先的名称和后缀名前加了八位的哈希码
}
}
}
]
},
四、结语
目前基本的功能都有了,但是还是不够完美,下期将会引入vue-router,并且使用UI框架,对业务进行一些封装,希望可以帮助到你,谢谢阅读到这的你,有问题可以及时告诉我,我立马改正