前端学习｜我的第一个vue程序

1 环境准备

硬件：一台笔记本电脑，配置呢，可以安装下面的软件即可

运行环境：Node，我们可以在命令行执行来查看运行环境的版本，官方指定为16+，例如我记起的Node的版本为19.3，建议使用最新版本。

~ # node --version
v19.3.0

运行工具：官方推荐使用Visual Studio Code。不过，你也可以使用其他的工具或者平台来作为开发。例如我的IDE如下：

工作空间：这个很好理解了，再磁盘的任意可以读写的位置创建一个vue工作空间即可。

2 创建程序

我在我电脑的目录下面创建一个文件夹，名称为VueSpace，当我在VS Code中打开后如下所示：

1）创建工作区

2）在工具中打开工作区

3）打开工作区的目录

4）创建vue程序

使用命令npm create vue@latest 创建程序。

输入项目的名称，我这边的项目名称为course01，其他选项都选择否即可，执行后，程序会提示我们可以执行下面的命令：

  cd course01  // 进入程序
  npm install  // 执行安装
  npm run dev  // 运行本地并启动

5）运行启动

按照提示命令，我们操作下。

从上面的npm run dev，不难看出执行命令后，程序提示我们本地地址：http://localhost:5174/即可访问程序，其中端口5173是随机的（当然，我们也是可以修改的）。

执行完成后，我们返回查看我们的工作区域，发现多了很多文件：

6）访问测试

按照提示，我们访问我们的程序，如下：

7）发布生产

如果我想将应用发布到生产环境时，那么就需要运行命令npm run build来产生 ./dist 文件夹中为你的应用创建一个生产环境的构建版本。

npm run build

3 核心架构理念

这个示例程序演示了Vue.js的核心概念，包括模板、数据、方法。在模板中，我们使用了双花括号语法来绑定数据，例如HelloWorld.vue文件中的{{ msg }}。

上述的自动产生的项目架构的主要目录和文件有public、src、gitignore、package.json 、vue.config.js。

1. public 文件夹：存放静态资源公共资源，不会被压缩合并。其中包含了网站图标 (favicon.ico)、首页入口HTML文件 (index.html)等。
2. src 文件夹：这是项目开发的主要文件夹。它包含以下子文件夹和文件：
   • assets：存放图片等静态文件。
   • components：存放组件。
   • App.vue：根组件。
   • main.js：入口文件。
3. .gitignore 文件：用来配置那些文件不归 Git 管理。
4. package.json 文件：项目配置和包管理文件（项目依赖和技术）。
5. vue.config.js 文件：项目配置信息，如跨域设置等。

上述是Vue3 项目生成的常见架构，但请注意，具体的项目结构可能会根据实际需求有所不同，需要根据项目来界定。

参考：

[1] https://cn.vuejs.org/guide/essentials/application.html

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！