不用vue-cli如何搭建vue项目

不用vue-cli搭建Vue项目的方法有：1、手动创建项目目录和文件；2、引入Vue库；3、配置Webpack；4、编写基本的Vue组件；5、配置开发服务器。以下是详细步骤：

一、手动创建项目目录和文件

创建一个新的文件夹作为项目的根目录。
在根目录下创建以下基本文件和文件夹结构：
- index.html
- src/
  - main.js
  - App.vue
- package.json
- webpack.config.js

project-root/ ├── index.html ├── src/ │ ├── main.js │ └── App.vue ├── package.json └── webpack.config.js

二、引入Vue库

在package.json文件中添加Vue和Webpack相关依赖，并安装这些依赖。

{
  "name": "vue-project",
  "version": "1.0.0",
  "description": "A Vue project without Vue CLI",
  "main": "src/main.js",
  "scripts": {
    "dev": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "dependencies": {
    "vue": "^3.2.0"
  },
  "devDependencies": {
    "webpack": "^5.0.0",
    "webpack-cli": "^4.0.0",
    "webpack-dev-server": "^3.11.0",
    "vue-loader": "^15.9.0",
    "vue-template-compiler": "^2.6.0",
    "css-loader": "^5.0.0",
    "vue-style-loader": "^4.1.2",
    "babel-loader": "^8.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-preset-env": "^1.7.0",
    "html-webpack-plugin": "^4.5.0"
  }
}

然后在终端运行以下命令安装依赖：

npm install

三、配置Webpack

在webpack.config.js文件中配置Webpack，以便它能够处理Vue文件和其他资源。

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
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'
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: 'index.html'
    })
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  }
};

四、编写基本的Vue组件

在src/main.js中引入Vue和App组件，并挂载到DOM上。

import Vue from 'vue';
import App from './App.vue';
new Vue({
  render: h => h(App)
}).$mount('#app');

在src/App.vue文件中编写基本的Vue组件。

<template>
  <div id="app">
    <h1>Hello Vue!</h1>
  </div>
</template>
<script>
export default {
  name: 'App'
};
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

五、配置开发服务器

确保在package.json中配置了开发服务器的脚本，如下所示：

"scripts": { "dev": "webpack serve --mode development", "build": "webpack --mode production" }

然后，在终端运行以下命令启动开发服务器：

npm run dev

总结

通过手动创建项目目录和文件、引入Vue库、配置Webpack、编写基本的Vue组件和配置开发服务器，我们可以不用vue-cli来搭建一个Vue项目。这种方法使我们对项目结构和配置有更深入的了解，也能够根据具体需求进行灵活调整。建议在掌握了基础知识后，继续学习Webpack的高级配置和Vue的高级特性，以便更好地开发复杂的前端应用。