二 vue环境搭建,项目雏形

1 vs 编辑器官方扩展插件 Volar

点开链接，直接安装 ，会调起vscode
https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar

2 node js 安装 ，项目创建

   1 下载node-js . [我下载的稳定版,不折腾]
  装玩后 node -v
  #现在玩的是vue3 ,建议使用vite 创建项目.
  
  在vscode 的terminal 下。
  npm init @vitejs/app
  /**
  按提示输入 ，创建项目目录。 以demo 为例
  后两个选vue .
  */
  
  cd demo
  npm install
  npm run dev

成功后，提示你 访问 http://localhost:3000

  

安装后，效果如图.

#初始化项目后的文件结构
.
├── README.md
├── index.html           入口文件
├── package.json
├── public               资源文件
│   └── favicon.ico
├── src                  源码
│   ├── App.vue          单文件组件
│   ├── assets
│   │   └── logo.png
│   ├── components   
│   │   └── HelloWorld.vue
│   └── main.js          入口
└── vite.config.js vite工程化配置文件

想改代码，就直接云 HelloWord.vue 里面

3 一个基于vue 项目的demo

进一步的，安装 vue-router ,Vuex

npm install vue-router@next vuex@next

项目文件夹规范：

├── src
│   ├── api            数据请求
│   ├── assets         静态资源
│   ├── components     组件
│   ├── pages          页面
│   ├── router         路由配置
│   ├── store          vuex数据
│   └── utils          工具函数

一个实例：

1 建pages

 在pages 下分别新建 about.vue home.vue
 

 
 

  
 

2 main.js 加上route 模块 (后面具体讲route)

import { createApp } from 'vue'
import App from './App.vue'

import router from './router/index'
createApp(App)
    .use(router)
    .mount('#app')

3 修改 App.vue

实际效果如下

4 what's more.

*当然这样还不够，我们在实际项目开发中还会有各种工具的集成，比如写 CSS 代码时，我们需要预处理工具 stylus 或者 sass；组件库开发中，我们需要 Element3 作为组件库；网络请求后端数据的时候，我们需要 Axios。对于团队维护的项目，工具集成完毕后，还要有严格的代码规范。我们需要 Eslint 和 Prettier 来规范代码的格式，Eslint 和 Prettier 可以规范项目中 JavaScript 代码的可读性和一致性。代码的管理还需要使用 Git，我们默认使用 GitHub 来托管我们的代码。此外，我们还会使用 commitizen 来规范 Git 的日志信息。对于我们项目的基础组件，我们还会提供单元测试来确保代码质量和可维护性，最后我们还会配置 GitHub Action 来实现自动化的部署。最后这个项目的架构大概是下面这样，这就是一个足以应对复杂项目开发的架构了
*

更选复杂的项目开发架构