vue + webpack 实践手动搭建环境基础环境(一)

最新推荐文章于 2024-09-12 16:09:28 发布

原创最新推荐文章于 2024-09-12 16:09:28 发布 · 620 阅读

1 ·

CC 4.0 BY-SA版权

前端工程化专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍如何从零开始手动搭建Vue项目的开发环境，包括创建项目文件夹、安装基础npm包、配置webpack、设置babel及运行项目等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么使用vue？

vue以数据驱动的 web 界面的渐进式框架点这里了解什么是pwa，vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。MVVM的开发模式，可以拆分成：View - ViewModel - Model（视图模型 - 控制器 - 数据模型）三部分。vue特性：轻量、数据双向绑定、指令、插件化。

手动搭建基础开发环境

第一步：创建文件
1、创建文件夹 VueCase
2、进入dos窗口，进入VueCase文件
3、初始化项目，新建package.json配置文件

npm init

第二步：安装基础npm包
1、根目录打开dos窗口输入以下指令安装

npm i vue --save-dev
npm i vue-loader --save-dev
npm i vue-template-compiler --save-dev
npm i webpack --save-dev
npm i webpack-cli --save-dev
npm i html-webpack-plugin --save-dev

第三步：基础配置
1、根目录创建webpack.config.js文件

// webpack.config.js 内容如下
const path = require('path'); // 路径，nodejs自带的包
const webpack = require('webpack');
const { VueLoaderPlugin } = require('vue-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const config = {
	entry: {
		main: path.join(__dirname, 'src/index.js'), // 入口文件
	},
	output: {
		filename: '[name].js', // 输出名字 [name]，输出源文件名，webpack缺省main.js
		path: path.join(__dirname, 'dist') // dist文件夹
	},
	module: {
		rules: [
			{
				test: /\.vue$/, // 以 .vue 结尾的文件 
				loader: "vue-loader" // 处理的规则loader
			}
		]
	},
	mode: 'development',
	// mode: 'production',

	plugins: [
		new VueLoaderPlugin(),
		new HtmlWebpackPlugin({
			filename: 'index.html'
		})
	]
};
module.exports = config;

2、根目录创建src文件夹，并在src下创建index.js

// 内容如下，初始化vue，传入根元素root，和app页面
import Vue from 'vue'; // 导入vue模块
import App from './app.vue'; // 导入app页面模块
const root = document.createElement('div'); // 创建容器
document.body.appendChild(root); // 添加容器至文档中
new Vue({
    el: root,
    render: (h) => h(App)
});

3、在src下创建app.vue文件

// 内容如下，template是vue指定的模板标签
// {{text}} 这种写法是现在比较流行的数据双向绑定
<template>
	<h3>{{text}}</h3>
</template>
<script>
	// 导出模块，data为数据部分
	export default {
		data(){
			return {
				text: 'Hello World!'
			}
		}
	}
</script>

第四步：配置babel
1、根目录创建.babelrc文件
2、Windows下使用命令行创建

type NUL>.babelrc // 创建.babelrc文件

3、安装babel相关的包

// 这里babel 更新到7.x了
npm i @babel/core 
// https://babeljs.io/docs/en/babel-preset-env#docsNav
npm i @babel/preset-env 
npm i @babel/runtime 
npm i @babel/plugin-syntax-jsx
// http://npm.taobao.org/package/babel-plugin-transform-vue-jsx
npm i babel-plugin-transform-vue-jsx

// .babelrc 内容如下
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false,
        "targets": {
          "browsers": [
            "> 1%",
            "last 2 versions",
            "not ie <= 8"
          ]
        }
      }
    ]
  ],
  "plugins": [
    "transform-vue-jsx"
  ]
}

第五步：运行

// dos 窗口中运行 以下指令，这里指定webpack的运行配置文件为webpack.config.js的原因，是因为直接运行“webpack”，调用的是全局的webpack，并不是项目中的webpack
webpack --config webpack.config.js
/* 
运行时出如下内容，需要全局安装webpack-cli【npm i -g webpack-cli】
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
 - webpack-cli (https://github.com/webpack/webpack-cli)
   The original webpack full-featured CLI.
We will use "npm" to install the CLI via "npm install -D".
Do you want to install 'webpack-cli' (yes/no):
*/

第六步：打包完成
1、根目录生成的dist文件
2、打开dist/index.html，页面上出现“Hello World！”字样说明此次手动搭建环境成功。
最后附上文件目录结构

vue-demo-1/
  ├─ dist
  ├─ node_modules
  ├─ src/
  │   ├─ app.vue
  │   └─ index.js
  ├─ .babelrc
  ├─ webpack.config.js
  ├─ README.md
  ├─ package.json
  └─ package-lock.json