Juriform36 项目启动与配置教程

1. 项目目录结构及介绍

Juriform36项目的目录结构大致如下：

juriform36/
├── public/                # 公共静态文件目录，如CSS、JavaScript、图片等
├── src/                   # 源代码目录
│   ├── components/        # 通用组件目录
│   ├── assets/            # 静态资源目录，如图片、样式表等
│   ├── views/             # 视图目录，包含页面相关的组件
│   ├── store/             # 状态管理目录
│   ├── router/            # 路由配置目录
│   ├── utils/             # 工具函数目录
│   ├── App.vue            # 根组件
│   ├── main.js            # 入口文件，Vue实例的创建
│   └── ...
├── .gitignore             # Git忽略文件
├── package.json           # 项目配置文件
├── package-lock.json      # 项目依赖锁定文件
└── ...

• public/：存放公共的静态资源，比如网站图标、登录页面的CSS文件等。
• src/：存放项目的源代码。
  • components/：存放可复用的Vue组件。
  • assets/：存放项目中的静态资源，如图片、样式表等。
  • views/：存放页面相关的组件。
  • store/：存放Vuex的状态管理文件。
  • router/：存放Vue Router的路由配置文件。
  • utils/：存放项目的工具函数。
  • App.vue：项目的根组件。
  • main.js：项目的入口文件，用于创建Vue实例。

2. 项目的启动文件介绍

项目的启动文件是src/main.js。以下是main.js的基本内容：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

这段代码首先导入了Vue、App组件、路由配置（router）和状态管理（store）。然后创建了一个Vue实例，将App组件挂载到DOM中的#app元素上，并启用了路由和状态管理。

3. 项目的配置文件介绍

项目的配置文件主要是package.json。以下是package.json的基本内容：

{
  "name": "juriform36",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e"
  },
  "dependencies": {
    "vue": "^2.6.11",
    "vue-router": "^3.3.4",
    "vuex": "^3.4.0",
    "axios": "^0.19.2",
    ...
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.2.0",
    "@vue/cli-plugin-eslint": "^4.2.0",
    ...
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

在package.json文件中：

• name和version定义了项目名称和版本。
• scripts定义了项目的脚本命令，例如启动开发服务（serve）、构建生产版本（build）、单元测试（test:unit）和端到端测试（test:e2e）。
• dependencies列出了项目依赖的生产版本库。
• devDependencies列出了项目依赖的开发版本库。
• browserslist指定了项目支持的目标浏览器范围。

要启动项目，你可以在命令行中运行以下命令：

npm run serve

这将启动一个开发服务器，你可以在浏览器中查看项目。