开源项目 `create-vue-app` 使用教程

开源项目 create-vue-app 使用教程

create-vue-appCreate Vue apps with no build configuration.项目地址:https://gitcode.com/gh_mirrors/cr/create-vue-app

本文档将详细介绍如何使用开源项目 create-vue-app，包括项目的目录结构、启动文件和配置文件的介绍。

1. 项目的目录结构及介绍

create-vue-app 项目的目录结构如下：

create-vue-app/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   ├── main.js
│   └── router.js
├── .gitignore
├── package.json
├── README.md
└── vue.config.js

目录结构介绍

• public/: 存放公共资源文件，如 index.html 和 favicon.ico。
• src/: 存放源代码文件。
  • assets/: 存放静态资源文件，如图片、样式文件等。
  • components/: 存放 Vue 组件文件。
  • App.vue: 根组件。
  • main.js: 入口文件。
  • router.js: 路由配置文件。
• .gitignore: Git 忽略文件配置。
• package.json: 项目依赖和脚本配置文件。
• README.md: 项目说明文档。
• vue.config.js: Vue 项目配置文件。

2. 项目的启动文件介绍

main.js

main.js 是项目的入口文件，负责初始化 Vue 实例并挂载到 DOM 中。

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

Vue.config.productionTip = false;

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

router.js

router.js 是路由配置文件，负责定义应用的路由规则。

import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/about',
      name: 'about',
      component: About,
    },
  ],
});

3. 项目的配置文件介绍

package.json

package.json 文件包含了项目的依赖和脚本配置。

{
  "name": "create-vue-app",
  "version": "1.0.0",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "vue": "^2.6.11",
    "vue-router": "^3.2.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.0",
    "@vue/cli-plugin-eslint": "^4.5.0",
    "@vue/cli-service": "^4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

vue.config.js

vue.config.js 文件用于配置 Vue 项目的构建选项。

create-vue-appCreate Vue apps with no build configuration.项目地址:https://gitcode.com/gh_mirrors/cr/create-vue-app