新建vue - 技术栈

1. 先把项目文件夹改名（必须做）

把你那个叫 vue2项目 的文件夹，改成：vue2-project

然后打开终端，进入这个文件夹：

bash

运行

复制代码

cd vue2-project

2. 初始化项目（生成 package.json）

bash

运行

复制代码

npm init -y

现在不会报错了。

3. 安装 Vue2 和开发工具

bash

运行

复制代码

npm install vue@2
npm install webpack webpack-cli webpack-dev-server vue-loader vue-template-compiler css-loader babel-loader @babel/core @babel/preset-env html-webpack-plugin -D

这一步会安装所有依赖，需要等几十秒。

4. 创建 4 个核心文件

在项目里新建这 4 个文件，直接复制我给的代码：

① webpack.config.js（打包配置）

复制代码

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      { test: /\.vue$/, loader: 'vue-loader' },
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.css$/, use: ['vue-style-loader', 'css-loader'] }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({ template: './public/index.html' })
  ],
  devServer: { open: true, hot: true },
  mode: 'development'
};

② .babelrc（Babel 配置）

json

复制代码

{
  "presets": ["@babel/preset-env"]
}

③ public/index.html（页面模板）

html

预览

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Vue2 项目</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

④ src/main.js（入口文件）

复制代码

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

⑤ src/App.vue（Vue 组件）

vue

复制代码

<template>
  <div id="app">
    <h1>我的第一个 Vue2 项目</h1>
    <p>成功运行啦！</p>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
h1 {
  color: #42b983;
}
</style>

5. 配置启动命令（重要）

打开 package.json ，找到 "scripts"，改成：

json

复制代码

"scripts": {
  "dev": "webpack serve",
  "build": "webpack"
},

6. 启动项目！

bash

运行

复制代码

npm run dev

✅ 浏览器会自动打开，看到绿色标题就说明成功了！

你现在能做的事

改 App.vue 里的内容 = 改页面
npm run build = 打包上线文件
继续加组件、路由、接口都可以