配置webpack.config.js
,注意配置中的逗号,
,我因为少了一个导致build失败1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
entry: path.join(__dirname, 'src/index.js'),
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist')
},
module: {
rules: [
{ test: /\.vue$/, loader: 'vue-loader' },
{ test: /\.vue\.html$/, loader: 'vue-loader' },
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.styl/,//支持css预处理
use: [
'style-loader',
'css-loader',
'stylus-loader'
]
},
{
test: /\.(gif|jpg|jpeg|png|svg)$/,//匹配图片文件
use: [
{
options: {
limit: 1024,//限制图片大小,符合标准的将会使用base64编码以减少请求
name: '[name].[ext]'//文件重命名,名称+后缀
}
}
]
}
]
},
plugins: [
new VueLoaderPlugin()
]
}
上面代码引用的模块有style-loader
,css-loader
,stylus-loader
,url-loader
,用于处理css样式以及文件名称
需要安装依赖的包1
npm i style-loader css-loader stylus-loader url-loader filse-loader
1 | import Vue from 'vue' |
1 | npm run build |
生成后会在dist/bundle.js
中发现静态资源css和小图片文件被加载到同一个js文件中,webpack为我们处理了相关的静态资源
1 | npm init |
1 | npm i webpack vue vue-loader |
可能会遇到提示npm WARN vue-loader@15.7.0 requires a peer of css-loader@* but none is installed. You must install peer dependencies yourself.
1
npm i css-loader
src
目录存放源码src
目录新建app.vue
文件开始敲代码,套路与HTML页面相同根目录
新建webpack.config.js
配置文件,配置需要的插件配置文件package.json
的内容1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22{
"name": "vue1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"css-loader": "^2.1.1",
"vue": "^2.6.10",
"vue-loader": "^15.7.0",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.29.6"
},
"devDependencies": {
"webpack-cli": "^3.3.0"
}
}
参数解读,勾选为必须项,不能为空
npm search
index.js
配置文件webpack.config.js
的内容1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20const path = require('path') //加载path模块
const { VueLoaderPlugin } = require('vue-loader')//加载vue-loader模块
module.exports = {
entry: path.join(__dirname, 'src/index.js'),//入口
output: {
filename: 'bundle.js',//输出的文件名
path: path.join(__dirname, 'dist')//输出的路径
},
module: {
rules: [
{ test: /\.vue$/, loader: 'vue-loader' },//加载vue-loader模块,支持.vue后缀文件
{ test: /\.vue\.html$/, loader: 'vue-loader' },
{ test: /.css$/, loader: 'css-loader' }//支持css代码
]
},
plugins: [
new VueLoaderPlugin()//添加vue-loader模块
]
}
根据package.json
中script
字段的值执行命令1
npm run build
Q:npm install 与 npm i有什么区别?
N:
实际使用的区别点主要如下(windows下):
作者:风翻火焰
原文:https://blog.csdn.net/chern1992/article/details/79193211
Q:安装时提示1
2
3
4
5
6
7npm ERR! code ENOSELF
npm ERR! Refusing to install package with name "vue" under a package
npm ERR! also called "vue". Did you name your project the same
npm ERR! as the dependency you re installing?
npm ERR!
npm ERR! For more information, see:
npm ERR! <https://docs.npmjs.com/cli/install#limitations-of-npms-install-algorithm>
N:在package.json文件中的项目名称不能为vue,改名即可
Q:安装时有黄色的WARN
怎么办?
N:根据提示安装相关的依赖,以下提示是因为前面npm init
步骤均为空(回车)的警告1
2npm WARN vue1@1.0.0 No description
npm WARN vue1@1.0.0 No repository field.
Q:vs code没有vue的代码补全怎么办?
N:在设置中安装HTML Snippets
插件,并在设置中添加配置1
2
3
4
5"files.associations": {
"*.ejs" : "html",
"*.js" : "html",
"*.vue" : "html"
}
Q:遇到警告 Module parse failed: Unexpected character '#' (18:0) You may need an appropriate loader to handle this file type.
N:缺少引用的插件,无法识别相应后缀名的代码及文件,添加引用即可
本来打算迁移Typeo博客到Hexo的,但是数据量一大完全撑不住,所以放GitHub当成纯粹和代码相关的站还是挺好的。
下一步开始学习VUE,从慕课网上找了一个,希望自己能坚持下去
https://www.imooc.com/learn/935
加油!
]]>1 | $ hexo new "My New Post" |
More info: Writing
1 | $ hexo server |
More info: Server
1 | $ hexo generate |
More info: Generating
1 | $ hexo deploy |
More info: Deployment
]]>