搭建简易vue项目(从零开始搭建一个基础版的)

搭建简易vue项目(从零开始搭建一个基础版的)(1)

搭建简易vue项目(从零开始搭建一个基础版的)(2)

文章正文

    • 前言
    • 安装 webpack
    • 创建项目
    • 创建一个简单的 Demo
    • 编译 ES6 代码
    • 编译 Vue 代码
    • 配置 vue-router
    • 让项目绑定端口跑起来
    • 编译生成 html 文件
    • 处理 CSS
    • cross-env
    • 使用 Less
    • 处理图片
    • 处理字体
    • 优化缓存
    • clean-webpack-plugin
    • 抽离公共代码
    • 优化组件的引入路径
    • 配置懒加载
    • 拆分webpack
    • 结语
    • 1. 创建 index.js 文件
    • 2. 在当前项目安装 webpack
    • 3. 创建 webpack.dev.config.js
    • 4. 在根目录创建 HTML 文件
    • 5. 执行编译命令
    • 1. 安装 ES6 需要的 loader
    • 2. 创建 .babelrc 文件
    • 3. 修改 webpack.dev.config.js 配置
    • 4. 添加 ES6 的代码
    • 5. 执行编译命令
    • 1. 安装解析 Vue 语法的 loader 和 Vue
    • 2. 修改 webpack.dev.config.js 配置
    • 3. 添加 Vue 模板文件
    • 4. 执行编译命令

前言

前段时间一直在找工作,作为前端目前最火的技术栈 Vue,被问到了很多次,其中问得最多的就是有没有自己动手搭过脚手架。

于是自己就尝试着搭建 Vue 脚手架,在搭建脚手架的过程中,自己也遇到了各式各样的问题,在此,我想把这些过程一步一步地写下来。本文的项目文件夹会一个一个地构建,配置每一行都会有注释,每一个文件干什么、配置是做什么的都会给大家介绍,供大家学习参考。

安装 webpack

在这里我已经假设用户已经安装 Node 环境,我就不介绍 Node 环境的安装,接下来我们安装 webpack,这里要全局安装,否则之后 webpack 命令无法执行。

npm install --g webpack webpack-cli

创建项目

使用右键创建文件夹 my-app,进入文件打开命令提示符或者 PowerShell,执行 npm init,直接全部回车,我们会看到文件夹里会多了一个 package.json 的文件,这里面主要是对当前项目的一些描述。

创建一个简单的 Demo

这里我准备随便写而一段 ES5 的代码,然后通过 webpack 打包,介绍 webpack 基本的输入输出配置。

1. 创建 index.js 文件

在根目录创建 src 文件夹,在该文件夹下创建 index.js 文件,并输入如下代码:

document.getElementById("app").innerHTML = "hello webpack";

2. 在当前项目安装 webpack

npm install --save-dev webpack webpack-cli

在以前只需要安装 webpack 即可,但是现在必须安装 webpack-cli,否则 webpack 命令会出错。

3. 创建 webpack.dev.config.js

我们在根目录建一个名为 webpack.dev.config.js 的文件,写上如下代码:

const path = require('path'); module.exports = { entry: path.join(__dirname, 'src/index.js'), output: { path: path.join(__dirname, './dist'), filename: 'app.js' } };

  • entry:入口,一般配置项目的入口文件
  • __dirname:node下的全局变量,返回的是当前项目的绝对路径
  • output:项目的输出配置
  • output.path:输出路径
  • output.filename: 输出文件名称

4. 在根目录创建 HTML 文件

在根目录创建名为 index.html 的文件,在 body 中写下如下内容,./dist/app.js 这个文件暂时是不存在的,编译之后才会有。

<body> <div id="app"></div> <script src="./dist/app.js"></script> </body>

5. 执行编译命令

在根目录执行编译命令,格式:webpack --config 文件名称

webpack --config webpack.dev.config.js

然后我们会看到根目录自动生成了 dist 文件夹,里面有一个 app.js,和 webpack.dev.config.js 里面输出是吻合的。这里来有一个警告:是指没有设置 webpack 的环境(生产 or 开发)。

一般解决方式两种:

修改命令

webpack --config webpack.dev.config.js --mode=development 或者 production

在 webpack.dev.config.js 里面的 entry 同级配置 mode:"development" 或者 mode:"production"。

在浏览器打开第 4 步在根目录创建的 index.html。

编译 ES6 代码

刚才演示了如何编译 ES5 的代码,接下来我们来看如何编译 ES6 的代码。

1. 安装 ES6 需要的 loader

  • babel-core:调用 Babel 的 API 进行转码
  • babel-preset-env:用于解析 ES6 的语法

npm install babel-core babel-loader babel-preset-env --save-dev

2. 创建 .babelrc 文件

创建 .babelrc 文件,并输入如下字符:

{ "presets": [ [ "env", { "targets": { "browsers": ["last 2 versions", "ie >= 7"] } } ] ], }

3. 修改 webpack.dev.config.js 配置

因为我们需要把 ES6 的代码转为 ES5 的代码,除了安装对于的 loader 外,还需要在 webpack.dev.config.js 中配置对于的解析规则。

在 output 的同级写入如下配置:

module: { rules: [ { test: /\.js$/, loader: 'babel-loader', exclude:/node-modules/ }, ] }

解析规则在 module 下的 rules 中配置,test 表示匹配的文件,loader 表示使用什么加载器,exclude 表示禁止解析该目录下的文件。

4. 添加 ES6 的代码

使用了 ES6 的箭头函数和字符串拼接方式,把 src 目录下的 index.js 文件修改为:

var str = "babel" var func = s => { document.getElementById("app").innerHTML = `hello ${s}`; } func(str);

5. 执行编译命令

执行命令:

webpack --config webpack.dev.config.js --mode=development

结果出现如下错误:

Error: Cannot find module

搭建简易vue项目(从零开始搭建一个基础版的)(3)

搭建简易vue项目(从零开始搭建一个基础版的)(4)

搭建简易vue项目(从零开始搭建一个基础版的)(5)

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页