1.简介

目前网上大部分搭建vue项目都是使用脚手架搭建的，这样很多配置就不用自己配置了。如果想要熟悉项目的结构和配置，可以手动搭建一个vue项目，既不使用脚手架搭建项目。

2.搭建步骤

2.1 环境配置

搭建一个vue项目，需要vue的环境和编译器。搭建一个vue项目，最少需要3个包。
1.vue：vue2代码的核心包。
2.vue-template-compiler：编译vue代码的包。
3.@vue/cli-service：构建工具，vue-cli继承了webpack。

npm install vue@2 -S
npm install vue-template-compiler @vue/cli-service -D

安装完成后，会出现一些文件夹。

node_modules
package-lock.json
package.json

2.2 搭建项目目录

在根目录下创建public和src文件夹。

pubic文件夹： --index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"></meta>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
        <meta name="viewport" content="width=device-width,initial-scale=1.0"></meta>
    </head>

    <body>
        <div id="app"></div>
    </body>
</html>

src文件夹 --App.vue

<template>
  <div id="app">
    <div>{{ message }}</div>
  </div>
</template>

<script>
export default {
  el: "#app",
  data: () => ({
    message: "vue2",
  }),
};
</script>

--main.js

import Vue from "vue";
import App from "./App.vue";

new Vue({
  render: (h) => h(App),
}).$mount("#app");

2.3 运行项目

需要项目运行起来，还需要配置项目的运行路径。

在package.json里面添加代码：

...
"scripts": {
    "serve": "vue-cli-service serve",
    "bulid": "vue-cli-service build"
  },
...

运行代码npm run serve，项目就可以运行起来。若想要运行成功后自动打开浏览器，那么在serve后面添加--open。

...
"serve": "vue-cli-service serve"
...

不使用脚手架搭建Vue项目

1.简介

2.搭建步骤

2.1 环境配置

2.2 搭建项目目录

2.3 运行项目