vue项目从0开始搭建

前言

在前端开发过程中，很多初学者不清楚vue如何快速搭建，当他们根据各种模版快速搭建项目时，可能会产生疑惑，例如："这个ESLint是做什么的"、"ts是什么"等一系列问题。今天我们通过简单的步骤，来搭建一个Vue前端项目，去除暂时不需要的包，目的是为了让大家能搞明白每个Vue项目，如何快速搭建开发。

开发环境

node v14.17.0
macos v12.1

Vue2项目搭建

1.先创建个空文件夹，使用vscode（非必须）打开，如下图所示

2.打开命令行终端，输入npm init -y,此步骤是初始化生成package.json文件，其中-y表示使用默认配置

3.安装Vue，推荐使用vue 2.6.14版本，在终端执行npm install vue@2.6.14 --save

4.安装vue-template-compiler，在终端执行npm install vue-template-compiler@2.6.14 -D

注意：vue版本需要与vue-template-compiler版本保持一致，关于原因：vue-loader.vuejs.org/zh/guide/#v...

5.我们安装@vue/cli-service，用于vue的本地打包和本地启动，@vue/cli-service基于webpack，封装了大部分loader组件，可开箱即用，官网地址：cli.vuejs.org/zh/ ，为了和vue2匹配，这里使用3.x版本，在终端输入npm install @vue/cli-service@3 -D

6.在pakcage.json文件内，新增两个指令，"dev": "vue-cli-service serve"代表本地启动，"build": "vue-cli-service build"代表本地打包，此时你的package.json文件应该如下图所示：

7.项目目录下创建目录src ,在src目录下创建main.js 文件，创建一个App.vue文件，结构如下图所示：

main.js代码：

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

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

App.vue代码：

<template>
  <div>App</div>
</template>

<script>
export default {

}
</script>

<style>

</style>

8.然后在终端运行npm run dev，即可启动服务如下：

9.添加vue-router，这里使用3.0x，官方地址：v3.router.vuejs.org/zh/

在终端输入npm install vue-router@3 --save，然后咱们项目新增一个router管理文件，增加两个页面vue文件，home和detail，目录结构如下：

router/index.js内代码如下：

import vueRouter from 'vue-router';
import Vue from 'vue';
Vue.use(vueRouter);
export default new vueRouter({
  // 路由模式
  mode: 'history',
  routes: [
    {
      path: '/home',
      component: () => import('@/views/home.vue')
    },
    {
      path: '/detail',
      component: () => import('@/views/detail.vue')
    }
  ]
})

main.js修改后如下：

import Vue from "vue";
import App from './App'
import vueRouter from './router/index'

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

App.vue文件修改后如下

<template>
  <router-view></router-view>
</template>

<script>
export default {

}
</script>

<style>

</style>

重新执行npm run dev，输入http://localhost:8080/home和http://localhost:8080/detail可查看对应页面信息

Vue3项目搭建

所有步骤基本相同

与vue2不同的是，vue3无需安装vue-template-compiler包

打开终端安装以下三个包：

npm install vue@3 --save

npm install vue-router --save

npm install @vue/cli-service -D

目录如下：

package.json文件内容如下：

/router/index.js代码如下：

import { createWebHistory, createRouter } from 'vue-router';

export default createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/home',
      component: () => import('@/views/home.vue')
    },
    {
      path: '/detail',
      component: () => import('@/views/detail.vue')
    }
  ]
})

main.js代码如下：

import { createApp } from 'vue';
import App from '@/App.vue'
import vueRouter from './router/index.js'
const app = createApp(App);
app.use(vueRouter);
app.mount('#app');

App.vue代码如下：

<template>
  <router-view></router-view>
</template>

<script setup>

</script>

<style>

</style>