【Vue】第一章 基础Vue项目架构搭建（参考自官网的快速开始部分）

前提条件：

• 安装Node.js
• 熟悉命令行 

第一步：新建项目文件夹，并用Vscode打开

第二步：在文件夹下，开启终端，并执行如下命令，初始化Vue环境

这里用了latest，表示用最新版本，当前最新的就是Vue3

npm init vue@latest

输入项目名称，其它默认No即可

 可以看到新建了一个项目文件夹，并多了一些文件，这就是脚手架的HelloWorld的demo组成，但是此时，我们项目需要的模块还没有引入到项目中，所以还要执行接下来的步骤

第三步：cd到项目目录下，初始化并下载安装必要模块后运行即可启动项目

切换到项目目录下

cd <your vue project directory>

 安装项目

npm install

 

 发现多了一个node_modules文件夹，里面多了一些不认识的模块，然后就可以启动脚手架项目了

npm run dev

第四步：启动浏览器，输入http://localhost:3000/

 第五步：应用程序发布到生产环境时，运行以下命令

npm run build

项目文件夹下又多了一个dist文件夹，里面就是我们打包好的前端项目了，可以看到Vue文件和其他相关依赖文件已经被转换成了浏览器能看懂的html、css和js等，意味着我们的前端工程可以上线了！ 

最后

我们打包好的dist文件夹可以直接运行在服务器上，但是本地运行会报错

找不到资源路径，报404错误。查看一下请求的资源路径，可以发现对于资源的请求路径都是绝对路径，为什么会这样？看一下html文件就会明白其中原因。

资源引入时用了"/"而不是"./",所以我们要在配置中把引入静态资源的样式改为"./"才可以本地运行。所以我们打开vite.config.js做以下修改(仅本地查看时需要，打包在服务上运行时不要)

import { fileURLToPath, URL } from 'url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  base:'./',
  // build:{
  //   outDir:'dist',
  //   assetsDir:'assets'
  // }
})

 这样打包时候，引入静态资源的部分就能自动变成相对路径了

  打开也没有问题了，以上就是对于Vue3脚手架的初探索，希望对大家有所帮助。