项目架构，借鉴vue-cli 指路官网
一、搭建前的准备
1. 安装node.js
下载地址node.js，安装直接下一步就行，详细的可以搜一搜。
2. 建立项目文件
一个空文件夹比如：
3. 验证安装
在命令行输入，检查版本信息依次输入命令：node -v 与 npm -v，出现如下结果表示安装成功。
Q: 命令行怎么打开？
在上图的地址栏中，把地址全部删掉输入cmd打开。
输入结果如下：
（注：版本号不需要与这个一致）
4. 初始化项目
在命令行输入命令初始化项目 npm init，参数一路回车，有需要在修改。
5. 添加镜像
添加npm镜像地址，原npm命令是从外国服务器下载，速度较慢。所以添加淘宝npm镜像代替，安装之后用cnpm代替npm命令使用。
命令：
npm install -g cnpm --registry=https://registry.npm.taobao.org
添加后执行cnpm -v查看
二、项目安装配置
安装vue、webpack与vue-loader
vue：主体依赖包
webpack：打包主要工具
vue-loader：基于webpack，主要作用是识别vue文件，将它编译成js文件。
浏览器不识别vue文件，所以需要一个翻译工具webpack，webpack需要将很多文件翻译成浏览器识别的文件，
所以vue-loader就相当于一个语言包，比如日语转中文，英语转中文等。
安装命令1：cnpm i vue -S
上面的命令等价于cnpm install vue --save
i是install的缩写
-S是--save的缩写，代表生产环境需要的插件，写入devDependencies对象
-D是--save-dev的缩写，代表开发环境需要，生产环境不需要的插件，写入dependencies对象
所以以上命令输出：
命令2：cnpm i webpack vue-loader -D
(省略部分截图，其中出现了部分警告，是因为开始建立项目的时候有部分描述没添加。直接忽略。)
命令3：cnpm i css-loader -D
这个就是webpack翻译css用的。
命令4：cnpm i style-loader -D
这个就是webpack翻译style样式用的。
三、项目运行配置
- 新建源入口文件与目录，目录名src，文件名
main.js
main.js:
// 入口文件
import Vue from 'vue';
import App from './app.vue';
const root = document.createElement('div')
document.body.appendChild(root)
// mount挂载到根节点
new Vue({
render: (h) => h(App)
}).$mount(root)
- 在src下添加文件
app.vue
app.vue
<template>
<div id="app">
{{ message }}
</div>
</template>
<script>
export default {
data() {
return {
message: 'ok'
}
}
}
</script>
<style>
#text {
color: red;
}
</style>
- 在根目录下新建
webpack.config.js文件
webpack.config.js
const path = require("path");// nodejs里基本路径
const vuePlugin = require('vue-loader/lib/plugin');
// __dirname相对于项目的路径
module.exports ={
entry: path.join(__dirname, 'src/main.js'),
output: {
filename: 'main.js',
path: path.join(__dirname, 'dist')
},
plugins: [
// Vue-loader在15.x之后需要添加
new vuePlugin()
],
mode:'none',
module: {
rules: [
{
// 翻译vue文件
test: /.vue$/,
loader: 'vue-loader'
},
{
// 翻译css文件
test: /.css$/,
// 翻译style行内样式与css文件
use: [
'style-loader',
'css-loader'
]
}
]
}
}
- 修改
package.json文件
package.json
{
"name": "web_test",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js" // 新增
},
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.6.11"
},
"devDependencies": {
"vue-template-compiler": "^2.6.11", // 如果没有添加上
"css-loader": "^4.2.0",
"style-loader": "^1.2.1",
"vue-loader": "^15.9.3",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12" // 后面解释
}
}
都建好后，文件应该是这样的
好的，经过上面几步文件基本设置完成
- 执行编译
npm run build上面的package.json文件中的build项标记了命令由来
注意：在编译的时候可能会报几个错
比如：
1 找不到vue-loader/lib/plugin，解决方法，升级vue-loader。
2 会提示安装webpack-cli，选择yes
3 如果安装完webpack-cli还是不好使，那么全局安装cnpm i webpack-cli -g，之后再选择yes安装
4 如果提示找不到webpack命令，则全局安装webpack，cnpm i webpack -g
5 如果安装乱了，蒙了或者各种错误。那么就直接删除node_modules文件夹。然后cnpm i，因为package.json中已经有安装记录，不需要重复再安装一遍（如果你愿意）。
6 最后执行一遍cnpm install或cnpm i（可不执行）
如果你到此已经全部成功，那么恭喜你，已经完成60%了，那么继续…
四、进阶配置
- 添加静态文件打包
目前为止已经加载过3个打包处理依赖包，本次同上，相信大家已经轻车熟路了吧，这次安装的是静态文件打包，主要就是图片、文件等。
执行cnpm i url-loader file-loader -D
继续安装css预处理与打包插件，css预处理插件主要包括less、sass/scss、stylus等，这里选择的是sass\scss老规矩输入命令：cnpm i node-sass sass-loader -D
安装成功后输出一大堆这里不截图了。
修改配置相关参数，打开webpack.config.js
const path = require("path");// nodejs里基本路径
const vuePlugin = require('vue-loader/lib/plugin');
// __dirname相对于项目的路径
module.exports ={
entry: path.join(__dirname, 'src/main.js'),
output: {
filename: 'main.js',
path: path.join(__dirname, 'dist')
},
plugins: [
// Vue-loader在15.x之后需要添加
new vuePlugin()
],
mode:'none',
module: {
rules: [
{
// 翻译vue文件
test: /.vue$/,
loader: 'vue-loader'
},
{
// 翻译css文件
test: /.css$/,
// 翻译style行内样式与css文件
use: [
'style-loader',
'css-loader'
]
},
{
// 翻译sass文件
test: /.sass$/,
loaders: ['style', 'css', 'sass']
},
{
// 图片文件的处理
test: /\.(jpg|jpeg|png|gif|svh)$/,
use:[
{
loader: 'url-loader',
options: {
limit: 1024,
name: '[name].[ext]'
}
}
]
}
]
}
}
然后修改人口文件main.js
//这是工程的入口文件
import Vue from 'vue';
import App from './app.vue';
import './assets/styles/test.css'; // 引入css
import './assets/images/timg.jpg'; // 引入图片
import './assets/styles/test-scss.scss'; // 引入sass/scss
const root = document.createElement('div')
document.body.appendChild(root)
//mount就是讲我们的App挂载到root这样一个根节点中去
new Vue({
render: (h) => h(App)
}).$mount(root)
好，配置完成编译一下npm run build
然后打开dist/main.js文件，查看安装结果
2.最后运行项目
本篇文章的最后一步，完成之后基本的架构搭建也就结束了，辛苦了，好回归正题。
最后需要安装三个插件：
- webpack-dev-server 即时编译，不用开发的时候每次都build
- cross-env 区分开发环境，设置变量。比如：不同环境的打包差异
- html-webpack-plugin 将vue文件生成html文件
安装cnpm i webpack-dev-server -D 与 cnpm i cross-env 与 cnpm i html-webpack-plugin -D
成功后配置package.json，在scripts对象中添加dev元素
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
},
然后配置webpack.config.js
const path = require("path");// nodejs里基本路径
const vuePlugin = require('vue-loader/lib/plugin');
const HTMLPlupin = require('html-webpack-plugin'); // 引入html生成插件
const nodeEnv = process.env.NODE_ENV = 'local'; // todo 设置process.env临时处理，之后可以优化
// __dirname相对于项目的路径
module.exports ={
entry: path.join(__dirname, 'src/main.js'),
output: {
filename: 'main.js',
path: path.join(__dirname, 'dist')
},
plugins: [
// Vue-loader在15.x之后需要添加
new vuePlugin(),
new HTMLPlupin() // 引入对象
],
mode:'none',
devServer: nodeEnv ? { // 设置本地路径端口
port: 8000,
host: '127.0.0.1',
overlay: {
erros: true,
},
open: true, // 自动打开浏览器
hot: true, // 不刷新改变页面
} : {},
module: {
rules: [
{
// 翻译vue文件
test: /.vue$/,
loader: 'vue-loader'
},
{
// 翻译css文件
test: /.css$/,
// 翻译style行内样式与css文件
use: [
'style-loader',
'css-loader'
]
},
{
// 翻译sass文件
test: /.sass$/,
loaders: ['style', 'css', 'sass']
},
{
// 打包文件
test: /\.(jpg|jpeg|png|gif|svh)$/,
use:[
{
loader: 'url-loader',
options: {
limit: 1024,
name: '[name].[ext]'
}
}
]
}
]
}
}
OK！大功告成，先执行一个npm run build庆祝一下。
好的，让我们来验收验收成果！
执行npm run dev开启实时编译
页面效果
好了，圆满收工。👏👏👏👏👏👏
最后提示：
npm run dev 与 npm run build的区别
dev是开发环境用的命令，打开命令行执行一遍，命令行不可关闭，每次修改不需要再次执行命令。
build打包项目放到生产环境，不需要上传全部文件，只需要上传dist文件夹即可。
福利源码：
码云
– 感谢观看 😃 –
温馨提示：记得点赞收藏，下次看更方便 ~
426
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
