webpack搭建vue项目,实现脚手架功能
本文基于node.js开发环境,安装完node之后新建项目,通过webpack配置,实现vue-cli脚手架功能
对于刚刚接触编程的人来说,最难的可能并不是学习一种新语法或者框架,而是编程思维,这种思维在调试的时候显得尤为重要,拥有良好的编程习惯和思维能力可以大幅度提高调试效率。而编程思维的培养往往需要经验的积累,只有把底层原理一遍遍地思考之后,才会有更深入的理解,这也是vue官方文档中不建议vue初学者直接使用vue-cli的原因之一。
所以今天特意一步步通过webpack配置,实现与vue-cli相同的效果,希望大家能有所收获。
1. 创建一个vue项目
使用命令行mkdir vuedeom 或者直接新建一个vuedemo空文件夹,然后命令行cd vuedemo,使用npm init -y初始化,此时你会看到文件夹多了一个package.json的文件,内容大致如下:
{
"name": "vuedemo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
2. 引入webpack
通过npm加载webpack,当然如果速度慢的话你也可以使用淘宝镜像,npm install -g cnpm –registry=https://registry.npm.taobao.org,然后输入命令:cnpm install webpack --save-dev
接下来我们在项目根目录创建一个src文件,有一个main.js,再创建一个webpack.config.js,最后修改package.json的脚本:
const path = require('path') //引入node内置模块path
module.exports ={
entry:'./src/main.js', // 入口文件,把src下的main.js编译到出口文件
output:{ //出口文件
path:path.resolve(__dirname,'dist'), //出口路径和目录
filename:"demo.js" //编译后的名称
}
}
//package.json
{
"name": "vuedemo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build":"webpack" //当使用npm run build的时候就会执行webpack,按照提示安装webpack-cli
},
"keywords": [],
"author": "",
"license": "ISC"
}
3. babel编译
虽然ES6语法已经广泛普及,但各个浏览器还不是特别兼容,为了避免出错我们需要把ES6转成ES5,使用babel进行编译
npm install --save-dev babel-core babel-loader
加载完成之后,在webpack.config.js配置
const path = require('path') module.exports ={
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:"demo.js"
},
module:{
rules:[ //遍历规则
{
test: /\.js$/, //匹配以js结尾的文件
loader:"babel-loader", // 使用babel-loader编译
exclude: /node_modules/ //node_module里面的内容不遍历
}
]
}
}
我测试的时候出现了这样的错误,如果有相同情况的可以参考下:
Error: Cannot find module '@babel/core'
babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.
这是因为版本之间的不兼容,按照上面的要求,你可以安装低版本的babel-loader@7
也有可能webpack会发出这样的警告:
WARNING 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.
你需要给脚本配置一个环境,一般build我们会用生产环境webpack --mode production,而dev会使用生产环境webpack --mode development (这个下面会讲)
另外,有时候我们可能会遇到不能识别webpack命令,原因未知,不过重新安装一次就可以了...
接下来需要让babel-loader翻译官具有翻译的功能:
并且新建一个.babelrc的文件,里面新建
{ "presets":["es2015"] }
如果需要转译ES7语法,你还需要安装
}
每次修改配置之后都要重新编译:npm run build
4. 解析样式
上面我们实现了vue引入和es6以及es7语法转译,现在我们来解析样式,需要安装两个包
别忘了在配置里webpack.config.json添加规则
5. 解析图片
图片是大多数项目不可获取的部分,怎样解析图片呢?和解析样式步骤差不多,我们需要先安装包再添加规则
npm install file-loader url-loader --save-dev
6. 解析html
我们希望build之后能有一个html文件,能直接看到编译之后的效果
这时就需要一个插件,插件的作用是以我们自己的html为模板将打包后的结果,自动引入到html中产出到dist目录下
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
....省略
plugins:[new HtmlWebpackPlugin({ //自动插入到dist目录中
template:'./index.html' //使用模板
filename:'login.html' //产出名称(一般不写)
})]
}
build之后你就可以看到dis下有一个index.html文件
7. 开发环境
一个项目创建分为开发环境和生产环境(上线),那么在开发的时候每次都需要build很不方便,而且build之后相当于最终的代码,不能随意更改,我们需要把这些内容都放到内存中,通过npm run dev打开
8. 配置vue
上面我们已经实现了基本的webpack配置,完成了html、css、less、图片、js等文件的解析,但我们最终想要的适合vue-cli一样的效果,这就要求我们还要对vue语法进行解析,如果你在main.js引入vue模块,使用vue时,你会发现控制台打印这样的错误
vue.runtime.esm.js:620 [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.
这是因为默认的vue引用的是vue.runtime.common.js,不能编译模板,你可以在引入vue的时候直接import Vue from 'vue/dist/vue'
另外一种办法是,你可以使用render函数,注意render()要有返回值
但是不管是改变vue引用js还是使用render函数都是不方便的,我们更希望页面组件能以.vue文件加载到html文件中
我们可以通过安装vue-loader(解析.vue文件)和vue-template-compiler(解析template模板)实现
npm install vue-loader vue-template-compiler --save-dev
之后我们在main.js引入App.vue模块,然后在render()引用:render:(h)=>h(App)
最后
到这里我们就实现了和vue-cli初始化出来的vue项目一样的效果,其实整个过程并不算太难,不过一步步实现还是很有帮助,vue初学者可以动手试试。当然,文章可能会有我疏忽的地方,有问题随时联系我呀~
webpack搭建vue项目,实现脚手架功能的更多相关文章
- webpack搭建vue项目开发环境【文档向学习】
为何有这篇文章 各个社区已经有无数篇帖子介绍如何使用webpack搭建前端项目,但无论是出于学习webpack的目的还是为了解决工作实际需要都面临着一个现实问题,那就是版本更新.别人的帖子可能刚写好版 ...
- 使用Webpack搭建Vue项目
前提: 1. 借助Node.js环境里的npm来安装, 2. 设置好npm镜像, (比如淘宝的npm镜像:输入 引用 npm install -g cnpm –registry=https://r ...
- 使用webpack搭建vue项目中遇到的问题
1:data数据文件经试验,需要放在生成的build文件夹中才能生效,但是应该把data文件夹先放在src中,然后如何定义config文件,让其复制过去? new CopyWebpackPlugin( ...
- webpack 搭建vue项目流程
1.安装node 2.打开命令行输入 npm install -g vue-cli 3.vue init webpack-simple vue 4.各种确认(enter键) 5.npm instal ...
- webpack搭建vue项目
链接:https://blog.csdn.net/qq_42181069/article/details/81137180 __dirname : 文件的绝对路径
- element-ui和npm、webpack、vue-cli搭建Vue项目
一.element-ui的简单使用 1.安装 1. npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i element-ui -S 2. CDN ...
- 利用VUE-CLI脚手架搭建VUE项目
前言 在学习完vue基础语法之后,学着利用vue-cli脚手架搭建一个项目,本篇随笔主要记录搭建的过程,供大家一起学习. 具体内容 搭建vue项目的准备工作 1.安装Nodejs.NPM以及VSCod ...
- 使用 webpack 手动搭建 vue 项目
webpack 是一个前端工程化打包工具,对于前端工程师来说 webpack 是一项十分重要的技能.下面我们就通过搭建一个 vue 项目来学习使用 webpack 主要环境: node v14.15. ...
- 用vue-cli来搭建vue项目和webpack
vue-cli 用vue-cli来搭建vue项目 第一步:全局安装vue-cli sudo npm install vue-cli -g 第二步:初始化一个项目 vue init webpack-si ...
随机推荐
- Confluence 6 数据库整合的方法 1:基本流程
步骤 1:对你的插件进行记录 对你近期在 Confluence 中安装和启用的插件进行记录,这你可以在后期对插件进行重新安装或者调整.针对你安装的插件,你需要记录下面的一些内容: 插件名称 版本号 启 ...
- Exception类的学习与继承总结
日期:2018.11.11 星期日 博客期:023 Exception类的学习与继承总结 说起来我们上课还是说过的!老师提到了报错问题出现主要分Exception和Error两类!第一次遇见这个问题是 ...
- matalb 产生信号源 AM调制解调 FM调制解调
%%%%%%%%%%%%%%%%%%%%%%%%%%% %AM调制解调系统 %%%%%%%%%%%%%%%%%%%%%%%%%%% clear; clf; close all Fs=800000;%采 ...
- 【mongo】centos6.9安装mongo2.6.3
参考:http://www.haorooms.com/post/3m 注意:centos6上就不要装mongo3了,容易出错. 1. 下载 curl -O http://downloads.mongo ...
- linux 将自己的服务添加到系统service服务
前言 我们在linux上要启动一个程序得时候, 往往都是要写一堆路径, 找到要启动得服务程序, 再用 ./*** 启动服务. 那么我们有没有快速启动方法吗, 答案是肯定得 service 介绍 官方介 ...
- JS实现继承的几种方式(转)
转自:幻天芒的博客 前言 JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一.那么如何在JS中实现继承呢?让我们拭目以待. JS继承的实现方式 既然要实现继承,那么首先我们得有一个父类,代码如 ...
- 数据库解析IP,时间戳
#解析IP SELECT INET_NTOA('168494269'); #解析时间戳 SELECT FROM_UNIXTIME('1505458308');
- mysql optimize table
mysql 数据文件的使用是只扩展,不回收.对表执行delete之后,磁盘上数据文件是不会缩小的. 通常的做法,是先逻辑导出,然后truncate 原表(或者删除重建),再导入. 另外还有一种方法是o ...
- jenkins上节点显示swap空间不足解决方案
查看内存占用情况:free -m 1.swap分区原理: swap分区在系统的物理内存不够用的时候,把物理内存中的一部分空间释放出来,以供当前运行的程序使用.那些被释放的空间可能来自一些很长时 ...
- IDEA文件对比