Vue CLI项目实战：新手入门教程

本文详细介绍了如何使用Vue CLI创建和管理Vue项目，从项目初始化到配置路由和状态管理，涵盖了各个关键步骤。通过本文，读者可以全面了解Vue CLI项目实战的全过程，包括构建和部署项目的方法。

Vue CLI简介

Vue CLI 是 Vue.js 的官方脚手架工具，它可以帮助开发者快速搭建 Vue.js 项目，并提供了丰富的配置选项以满足不同项目的需求。Vue CLI 通过提供预设的配置，使得项目初始化和构建变得简单，从而让开发者可以专注于开发业务逻辑，而不是被繁琐的配置所困扰。

什么是Vue CLI

Vue CLI 是一个命令行工具，通过该工具可以快速启动一个 Vue.js 项目。它集成了很多 Vue 社区的最佳实践和工具，使得项目配置变得更加简单。Vue CLI 提供了多种默认的配置选项，让开发者可以根据项目需求快速创建项目，并且可以轻松地自定义项目配置。

Vue CLI的安装与配置

在开始使用 Vue CLI 之前，你需要首先安装 Node.js 和 npm，因为 Vue CLI 是基于 Node.js 的。以下是安装 Vue CLI 的步骤：

1. 安装Node.js和npm

   请确保已安装 Node.js 和 npm。可以通过以下命令检查是否已经安装：

   node -v
   npm -v

   如果没有安装，可以从 Node.js 官方网站 下载并安装最新版本的 Node.js，安装过程中会自动安装 npm。

2. 安装Vue CLI

   安装 Vue CLI 很简单，只需要使用 npm 全局安装 Vue CLI：

   npm install -g @vue/cli

   安装完成后，可以通过 vue -V 命令来验证 Vue CLI 是否安装成功：

   vue -V

3. 创建和初始化项目

   安装完成后，可以使用 Vue CLI 创建一个新的 Vue 项目。首先，打开终端，进入一个你喜欢的工作目录，然后运行以下命令：

   vue create my-vue-app

   这个命令会创建一个名为 my-vue-app 的新项目。在项目的创建过程中，Vue CLI 会提供一个交互式的界面，让你选择预设的配置或者手动配置项目：

   • 预设配置（Presets）：Vue CLI 提供了一些预设配置，包括默认配置和其他开发者推荐的配置。
   • 手动配置（Manually select features）：允许你根据需要选择项目配置，包括模板引擎、路由器、状态管理等。

   选择预设配置后，Vue CLI 会自动下载并安装所需的依赖，然后初始化项目。你可以选择默认配置，或者根据提示自定义配置。项目创建完成后，可以在终端中使用 cd my-vue-app 进入项目目录，并使用 npm run serve 命令启动开发服务器，查看项目的运行情况。

创建Vue项目

使用Vue CLI创建新项目

使用 Vue CLI 创建一个新的 Vue 项目非常简单。这里我们以一个名为 my-vue-app 的项目为例，展示如何使用 Vue CLI 创建一个新的 Vue 项目。

1. 初始化项目

   打开终端，进入一个你喜欢的工作目录，然后运行以下命令：

   vue create my-vue-app

   运行该命令后，Vue CLI 会启动一个交互式的界面，让你选择预设配置或手动选择项目配置。

2. 选择预设配置

   如果选择预设配置，Vue CLI 会提供几个常用的配置选项，包括默认配置和其他开发者推荐的配置。你可以根据需要选择一个预设配置。

3. 手动选择配置

   如果选择手动配置，Vue CLI 会提示你选择项目所需的配置。例如，你可能需要选择所使用的模板引擎、路由管理器（如 Vue Router），以及状态管理库（如 Vuex）等。以下是一些可能的选项：

   • 模板引擎：默认是 Vue，但也可以选择其他模板引擎如 Pug。
   • 路由器：默认使用 Vue Router，但也可以选择其他路由管理器。
   • 状态管理：可以选择 Vuex，但也可以选择其他状态管理库。
   • Lint & Style Guide：可以选择使用 ESLint 进行代码检查，并选择预设的代码风格。

   选择完配置后，Vue CLI 会自动下载并安装所需的依赖，然后初始化项目。

4. 启动项目

   项目创建完成后，可以在终端中使用以下命令启动开发服务器，查看项目的运行情况：

   cd my-vue-app
   npm run serve

   这会启动一个开发服务器，默认在 http://localhost:8080 地址上运行。你可以打开浏览器访问该地址，查看项目是否正常运行。

项目目录结构解析

创建项目后，Vue CLI 会生成一套标准的项目目录结构。以下是一些常见目录和文件的说明：

1. public 目录

   这个目录存放的是静态资源文件，如 index.html、favicon.ico 等。当项目构建时，public 目录中的文件会被复制到 dist 目录中。

   public/
    index.html
    favicon.ico

2. src 目录

   这是项目的核心代码目录，包括组件文件、路由配置、状态管理等。

   • main.js：这是项目的入口文件，包含了 Vue 实例的创建和渲染过程。代码如下：

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

   • App.vue：这是应用的根组件文件，包含了应用的根元素和一些基本的样式。代码如下：

   <template>
    <div id="app">
      <router-view/>
    </div>
   </template>
   
   <script>
   export default {
    name: 'App',
   };
   </script>
   
   <style>
   #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
   }
   </style>

   • components 目录：存放应用中的各个组件。例如，你可以创建一个名为 HelloWorld.vue 的组件：

   <template>
    <div class="hello">
      <h1>{{ msg }}</h1>
    </div>
   </template>
   
   <script>
   export default {
    name: 'HelloWorld',
    props: {
      msg: String,
    },
   };
   </script>
   
   <style scoped>
   .hello {
    background-color: #f0f0f0;
    padding: 20px;
    border-radius: 8px;
   }
   </style>

   • router 目录：存放路由相关的配置文件。例如，可以创建一个 index.js 文件来配置路由：

   import Vue from 'vue';
   import Router from 'vue-router';
   import Home from '../views/Home.vue';
   import About from '../views/About.vue';
   
   Vue.use(Router);
   
   const routes = [
    { path: '/', name: 'Home', component: Home },
    { path: '/about', name: 'About', component: About },
   ];
   
   export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes,
   });

   • store 目录：存放状态管理相关的配置文件。例如，可以创建一个 index.js 文件来定义 Store：

   import Vue from 'vue';
   import Vuex from 'vuex';
   
   Vue.use(Vuex);
   
   export default new Vuex.Store({
    state: {
      count: 0,
    },
    mutations: {
      increment(state) {
        state.count++;
      },
    },
    actions: {
      increment({ commit }) {
        commit('increment');
      },
    },
   });

3. node_modules 目录

   这个目录包含了项目的依赖包。Vue CLI 会自动安装项目依赖，并将其放入该目录中。

4. package.json 文件

   这个文件包含了项目的元数据和依赖配置。通过 npm run 命令来运行脚本（如构建、启动开发服务器等）。

   {
    "name": "my-vue-app",
    "version": "0.1.0",
    "private": true,
    "scripts": {
      "serve": "vue-cli-service serve",
      "build": "vue-cli-service build",
      "lint": "vue-cli-service lint"
    },
    "dependencies": {
      "vue": "^2.6.11",
      "vue-router": "^3.1.3",
      "vuex": "^3.1.1"
    },
    "devDependencies": {
      "@vue/cli-service": "^4.5.0",
      "eslint": "^6.7.0",
      "eslint-plugin-vue": "^6.2.2"
    },
    "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 CLI 创建一个新的 Vue 项目，并熟悉了项目的目录结构。接下来，我们将深入学习如何开发基本的 Vue 组件。

基本组件开发

在 Vue 中，组件是应用的基本构建块。每个 Vue 组件都有一个模板、一个 JavaScript 背景逻辑和一个作用域内的样式。通过组合和重用这些组件，你可以构建复杂的用户界面。本节将介绍如何创建和使用组件，以及组件之间的通信方法。

创建和使用组件

在 Vue 中，组件通常使用 .vue 文件来定义。这些文件包含一个模板、一个脚本（JavaScript 代码）和一个样式部分。下面将通过一个简单的例子来介绍如何创建和使用组件。

1. 创建组件文件

   首先，我们创建一个名为 HelloWorld.vue 的组件文件，该组件将显示一个简单的欢迎消息。在 src/components 目录中创建该文件，并编写以下内容：

   <template>
    <div class="hello">
      <h1>{{ msg }}</h1>
    </div>
   </template>
   
   <script>
   export default {
    name: 'HelloWorld',
    props: {
      msg: String,
    },
   };
   </script>
   
   <style scoped>
   .hello {
    background-color: #f0f0f0;
    padding: 20px;
    border-radius: 8px;
   }
   </style>

   以上代码定义了一个名为 HelloWorld 的组件。组件的模板部分使用了 HTML 语法，而脚本和样式部分分别定义了组件的数据和样式。需要注意的是，props 是一个对象，用于定义组件接受的属性。

2. 使用组件

   接下来，在 App.vue 文件中引入并使用 HelloWorld 组件。在 App.vue 文件中，修改 <template> 部分以引入和使用 HelloWorld 组件：

   <template>
    <div id="app">
      <HelloWorld msg="Welcome to My Vue App" />
    </div>
   </template>
   
   <script>
   import HelloWorld from './components/HelloWorld.vue';
   
   export default {
    name: 'App',
    components: {
      HelloWorld,
    },
   };
   </script>
   
   <style>
   #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
   }
   </style>

   在 App.vue 文件中，我们首先导入了 HelloWorld 组件，然后在 <script> 部分通过 components 选项将 HelloWorld 注册为一个全局组件。在 <template> 中，我们使用了 HelloWorld 组件，并传递了一个 msg 属性的值为 "Welcome to My Vue App"。

通过上述步骤，我们已经成功创建并使用了一个简单的 Vue 组件。接下来，我们将进一步学习组件之间的通信方法。

组件间通信

在 Vue 中，组件之间可以通过多种方式进行通信，包括父组件向子组件传递数据、子组件向父组件传递数据，以及通过事件总线或 Vuex 等全局状态管理库进行通信。下面将介绍几种常见的组件间通信方法。

1. 传值方式

   父组件可以通过 props 向子组件传递数据。在 HelloWorld.vue 组件中，我们已经通过 props 接收了来自父组件的数据。父组件可以通过以下方式向子组件传递数据：

   <!-- App.vue -->
   <template>
    <div id="app">
      <HelloWorld msg="Hello from Parent" />
    </div>
   </template>
   
   <script>
   import HelloWorld from './components/HelloWorld.vue';
   
   export default {
    name: 'App',
    components: {
      HelloWorld,
    },
   };
   </script>

   在上述代码中，父组件 <App> 通过 HelloWorld 组件的 msg 属性传递了一个值 "Hello from Parent"。

2. 回调方式

   子组件可以通过事件将数据传递给父组件。Vue 提供了 $emit 方法，子组件可以使用该方法触发自定义事件，并将数据传递给父组件。父组件可以在监听这些事件时获取传递的数据。

   • 子组件触发事件

     在 HelloWorld.vue 组件中，我们可以添加一个按钮，点击按钮时触发一个自定义事件 myEvent，并向父组件传递一些数据：

     <template>
     <div class="hello">
      <h1>{{ msg }}</h1>
      <button @click="handleClick">Click me</button>
     </div>
     </template>
     
     <script>
     export default {
     name: 'HelloWorld',
     props: {
      msg: String,
     },
     methods: {
      handleClick() {
        this.$emit('myEvent', 'Hello from Child');
      },
     },
     };
     </script>

     在上述代码中，我们为按钮添加了一个点击事件处理器 handleClick，该处理器使用 $emit 触发了一个名为 myEvent 的自定义事件，并传递了一个字符串 "Hello from Child"。

   • 父组件监听事件

     在 App.vue 组件中，我们可以通过监听子组件触发的事件来获取传递的数据：

     <template>
     <div id="app">
      <HelloWorld msg="Hello from Parent" @myEvent="handleMyEvent" />
     </div>
     </template>
     
     <script>
     import HelloWorld from './components/HelloWorld.vue';
     
     export default {
     name: 'App',
     components: {
      HelloWorld,
     },
     methods: {
      handleMyEvent(data) {
        console.log('Received data from child:', data);
      },
     },
     };
     </script>

     在 App.vue 文件中，我们通过 @myEvent 监听子组件触发的 myEvent 事件，并在 handleMyEvent 方法中接收传递的数据。

通过上述步骤，你已经了解了如何通过事件传递数据从子组件到父组件。接下来，我们继续学习如何使用 Vuex 进行状态管理。

路由管理

路由管理是 Web 应用中不可或缺的一部分，它允许用户在应用的不同页面之间导航，而无需重新加载整个页面。在 Vue 中，通常使用 Vue Router 来管理应用的路由。本节将介绍如何安装 Vue Router 并配置多页面路由。

安装Vue Router

Vue Router 是一个官方的路由管理器，适用于 Vue.js 应用。它允许你定义不同的路由来导航页面，同时管理应用的状态和视图。以下是安装和配置 Vue Router 的步骤：

1. 安装Vue Router

   首先，在项目根目录下执行以下命令安装 Vue Router：

   npm install vue-router

   安装完成后，可以在项目中使用 Vue Router 来管理路由。

2. 配置Vue Router

   接下来，我们需要配置 Vue Router，并在项目中使用它。通常，我们会将路由配置放在 src/router 目录下的 index.js 文件中。以下是配置 Vue Router 的基本步骤：

   • 创建路由配置文件

     在 src/router 目录下创建一个 index.js 文件。在这个文件中，我们将定义应用的路由。

     import Vue from 'vue';
     import Router from 'vue-router';
     import Home from '../views/Home.vue';
     import About from '../views/About.vue';
     
     Vue.use(Router);
     
     const routes = [
     {
      path: '/',
      name: 'Home',
      component: Home,
     },
     {
      path: '/about',
      name: 'About',
      component: About,
     },
     ];
     
     export default new Router({
     mode: 'history',
     base: process.env.BASE_URL,
     routes,
     });

     以上代码定义了两个路由：一个根路由 / 对应 Home 组件，一个 /about 路由对应 About 组件。每个路由配置项定义了一个路径和对应的组件名称，并使用了动态导入的方式加载组件。

   • 在项目入口文件中引入路由配置

     为了让 Vue Router 在应用中生效，我们需要在项目入口文件 src/main.js 中引入配置好的路由，并将其挂载到 Vue 实例上。

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

     以上代码中，router 是我们刚才创建的路由配置文件。通过 router 选项将 Vue Router 挂载到了 Vue 实例上。

配置多页面路由

在复杂的应用中，我们通常需要定义多个页面路由。接下来，我们将配置多个页面路由，并学习如何在页面之间导航。

1. 创建多个页面

   首先，在 src/views 目录下创建一些页面组件，例如 Home.vue 和 About.vue：

   <!-- src/views/Home.vue -->
   <template>
    <div>
      <h1>Home Page</h1>
    </div>
   </template>
   
   <script>
   export default {
    name: 'Home',
   };
   </script>

   <!-- src/views/About.vue -->
   <template>
    <div>
      <h1>About Page</h1>
    </div>
   </template>
   
   <script>
   export default {
    name: 'About',
   };
   </script>

   上述代码定义了两个简单的页面组件 Home 和 About。

2. 配置多个路由

   在 src/router/index.js 文件中配置多个路由：

   import Vue from 'vue';
   import Router from 'vue-router';
   import Home from '../views/Home.vue';
   import About from '../views/About.vue';
   
   Vue.use(Router);
   
   const routes = [
    {
      path: '/',
      name: 'Home',
      component: Home,
    },
    {
      path: '/about',
      name: 'About',
      component: About,
    },
   ];
   
   export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes,
   });

   以上代码定义了两个路由，分别对应 Home 和 About 页面组件。

3. 在应用中使用路由

   最后，在 src/App.vue 文件中使用 <router-view> 组件来渲染当前路由对应的组件：

   <template>
    <div id="app">
      <router-view></router-view>
    </div>
   </template>
   
   <script>
   export default {
    name: 'App',
   };
   </script>

   通过 <router-view>，Vue Router 会根据当前路由渲染对应的组件。

通过上述步骤，你已经成功配置了多个页面路由，并可以在不同页面之间导航。接下来，我们继续学习如何使用 Vuex 进行状态管理。

状态管理

状态管理是一个复杂应用中不可或缺的一部分。它允许你在应用的不同组件之间共享状态，并管理这些状态的变化。在 Vue 中，通常使用 Vuex 来进行状态管理。本节将介绍如何使用 Vuex 管理应用的状态，以及如何创建和使用 Store。

使用Vuex管理应用状态

Vuex 是一个专为 Vue.js 应用设计的状态管理模式。它是一个可预测的状态容器，通过一个单例 Store 来管理应用的状态。以下是使用 Vuex 管理应用状态的基本步骤：

1. 安装Vuex

   首先，在项目根目录下执行以下命令安装 Vuex：

   npm install vuex

   安装完成后，可以在项目中使用 Vuex 来管理状态。

2. 配置Vuex Store

   接下来，我们需要配置 Vuex Store，并在项目中使用它。通常，我们会将 Store 配置放在 src/store 目录下的 index.js 文件中。以下是配置 Vuex Store 的基本步骤：

   • 创建Store配置文件

     在 src/store 目录下创建一个 index.js 文件。在这个文件中，我们将定义应用的状态和状态的变更方法。

     import Vue from 'vue';
     import Vuex from 'vuex';
     
     Vue.use(Vuex);
     
     export default new Vuex.Store({
     state: {
      count: 0,
     },
     mutations: {
      increment(state) {
        state.count++;
      },
     },
     actions: {
      increment({ commit }) {
        commit('increment');
      },
     },
     });

     以上代码定义了一个简单的 Store，它包含一个 state 对象和一个 mutations 方法。state 对象定义了应用的状态，而 mutations 方法定义了变更状态的方法。此外，我们还定义了一个 actions 方法，它可以在异步操作中调用 mutations 方法。

   • 在项目入口文件中引入Store配置

     为了让 Vuex Store 在应用中生效，我们需要在项目入口文件 src/main.js 中引入配置好的 Store，并将其挂载到 Vue 实例上。

     import Vue from 'vue';
     import App from './App.vue';
     import store from './store';
     
     new Vue({
     store,
     render: h => h(App),
     }).$mount('#app');

     以上代码中，store 是我们刚才创建的 Store 配置文件。通过 store 选项将 Vuex Store 挂载到了 Vue 实例上。

创建和使用Store

在配置完 Vuex Store 后，我们可以在任何组件中通过 this.$store 访问 Store 中的状态和方法。接下来，我们将通过一个简单的例子来介绍如何创建和使用 Store。

1. 在组件中访问Store

   在 src/views/HelloWorld.vue 组件中，我们可以通过 this.$store 访问 Store 中的状态和方法。例如，我们可以在组件的方法中调用 Store 的 actions 方法来变更状态：

   <template>
    <div class="hello">
      <h1>{{ count }}</h1>
      <button @click="incrementCount">Increment</button>
    </div>
   </template>
   
   <script>
   export default {
    name: 'HelloWorld',
    computed: {
      count() {
        return this.$store.state.count;
      },
    },
    methods: {
      incrementCount() {
        this.$store.dispatch('increment');
      },
    },
   };
   </script>

   在上述代码中，我们通过 computed 属性访问了 Store 中的状态 count，并在点击按钮时调用了 increment 方法来变更状态。

2. 在组件中更新视图

   为了使组件能够根据 Store 中状态的变化自动更新视图，我们可以在组件中使用 Vue 的响应式特性。在 src/views/HelloWorld.vue 组件中，我们可以通过 computed 属性来访问 Store 中的状态，并在状态变化时自动更新视图：

   <template>
    <div class="hello">
      <h1>{{ count }}</h1>
      <button @click="incrementCount">Increment</button>
    </div>
   </template>
   
   <script>
   export default {
    name: 'HelloWorld',
    computed: {
      count() {
        return this.$store.state.count;
      },
    },
    methods: {
      incrementCount() {
        this.$store.dispatch('increment');
      },
    },
   };
   </script>

   通过上述步骤，你已经成功创建并使用了 Vuex Store。接下来，我们将学习如何构建和打包 Vue 项目，并部署到不同的平台。

项目部署

构建和打包是将开发环境中的代码转换为可以在生产环境中运行的代码的过程。Vue CLI 提供了强大的构建工具来帮助我们完成这一过程。本节将介绍如何构建和打包 Vue 项目，并部署到不同的平台。

构建和打包Vue项目

在开发过程中，我们通常使用 npm run serve 命令来启动开发服务器，查看项目的实时运行效果。然而，在生产环境中，我们需要构建和打包项目，以确保项目能够在生产环境中稳定运行。

1. 构建项目

   使用 Vue CLI 构建项目的命令如下：

   npm run build

   这将运行 vue-cli-service build 命令，构建项目并输出到 dist 目录下。dist 目录中包含了构建后的静态文件，包括 HTML、CSS、JavaScript 文件等。

   构建后的文件将自动优化和压缩，以提高加载速度和减少文件大小。构建过程中会生成一个 index.html 文件，这是项目的入口文件。

2. 打包项目

   打包过程类似于构建过程，但通常打包是指将构建后的文件进一步压缩和优化，以适应不同的部署环境。通常情况下，构建过程已经包含了打包的功能，因此直接使用 npm run build 命令即可完成打包。

   构建和打包后，项目会被输出到 dist 目录下，可以通过以下命令查看构建后的文件：

   ls dist

部署到不同平台

部署是指将构建和打包后的静态文件上传到服务器或云平台，使其能够在生产环境中运行。以下是几种常见的部署平台和方法：

1. 部署到GitHub Pages

   GitHub Pages 是一个免费的静态网站托管服务，可以直接部署 Vue 项目。以下是部署到 GitHub Pages 的步骤：

   1. 创建GitHub仓库

      首先，在 GitHub 上创建一个新的仓库，并将仓库克隆到本地：

      git clone https://github.com/username/repository.git
      cd repository

   2. 修改package.json文件

      在 package.json 文件中添加一个 homepage 字段，并设置为仓库的 GitHub Pages 地址（例如 https://username.github.io/repository）：

      {
      "name": "my-vue-app",
      "version": "0.1.0",
      "private": true,
      "homepage": "https://username.github.io/repository",
      "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
      }
      }

   3. 构建项目

      运行构建命令，生成 dist 目录中的文件：

      npm run build

   4. 上传到GitHub

      将 dist 目录中的文件上传到 GitHub 的 gh-pages 分支：

      git checkout -b gh-pages
      cp -r dist/* .
      git add .
      git commit -m "Deploy to GitHub Pages"
      git push origin gh-pages

   5. 访问GitHub Pages

      上传完成后，可以通过 GitHub 提供的地址访问项目：

      https://username.github.io/repository

2. 部署到Netlify

   Netlify 是一个专业的静态网站托管服务，支持快速部署和自动构建。以下是部署到 Netlify 的步骤：

   1. 创建Netlify账号

      在 Netlify 官网注册一个账号，并登录到控制台。

   2. 连接GitHub仓库

      在 Netlify 控制台中，点击 "New site from Git"，选择 GitHub，然后选择你的仓库。

   3. 选择构建设置

      在 Netlify 中选择要部署的分支，默认是 master 或 main，然后选择构建设置。

   4. 配置构建命令

      在构建设置中，设置构建命令为 npm run build，并将输出目录设置为 dist。

   5. 部署项目

      点击 "Deploy site"，Netlify 将自动构建并部署项目。

   6. 访问部署的网站

      部署完成后，可以通过 Netlify 提供的地址访问项目。

通过上述步骤，你已经成功构建并部署了 Vue 项目。接下来，你可以根据需要选择合适的部署平台，将项目部署到生产环境。

总结

通过以上内容，你已经掌握了如何使用 Vue CLI 创建和管理 Vue 项目的基本步骤。从项目初始化到路由管理、状态管理和项目部署，每一步都详细介绍了相关概念和操作方法。希望这些内容能够帮助你更好地理解和使用 Vue.js，提高开发效率。如果你希望进一步深入学习，可以参考 Vue.js 的官方文档或参加在线课程，例如 慕课网 提供的相关课程。