Vue实战：使用CLI构建Vue项目

酒城译痴无心剑

已于 2024-01-14 17:04:22 修改

阅读量2.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： # Vue学习笔记文章标签： vue vue cli

于 2019-11-08 15:54:13 首次发布

本文链接：https://blog.youkuaiyun.com/howard2005/article/details/102973556

Vue学习笔记专栏收录该内容

23 篇文章

订阅专栏

本教程详细介绍了使用VueCLI从零开始构建Vue.js前端项目的过程，包括环境配置、项目创建、开发与运行。通过命令行和集成开发环境IntelliJ IDEA展示了项目构建、组件管理及路由配置，展示了VueCLI在前端开发工作流上的高效性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、实战概述

本实战教程详细阐述了使用Vue CLI从零开始构建Vue.js前端项目的过程，包括环境配置、项目创建、开发与运行。首先通过Node.js的npm包管理器全局安装Vue CLI工具，确保环境变量设置正确，并验证Node.js和npm版本。接着，以命令行方式展示了如何创建一个基于webpack模板的Vue项目，步骤涵盖了项目目录结构生成、个性化配置以及通过`npm run dev`启动本地开发服务器。

此外，还介绍了利用集成开发环境IntelliJ IDEA创建Vue项目的流程，其中涉及安装Vue插件、新建项目及运行项目。在项目构建完成后，重点讲解了Vue项目的基本结构，如index.html作为HTML入口文件，App.vue作为根组件，main.js为JavaScript入口文件，以及router/index.js用于定义应用路由规则。

对于新增页面的操作，演示了在components目录下创建新的Vue组件，并在路由配置中添加指向新组件的规则，最后访问新页面进行验证。

整个实战环节充分体现了Vue CLI的强大之处，它简化了项目初始化、开发环境搭建、组件管理和路由配置等核心任务，使得开发者能够高效地构建和迭代现代Web应用。

二、实战步骤

（一）安装Vue CLI

要用到集成在node.js里的npm来安装Vue CLI。

1、下载并安装node.js

2、配置node.js的环境变量

3、启动命令行，查看node版本

4、查看npm的版本

5、安装vue cli

nmp install -g vue-cli

（二）构建前端项目

1、命令行方式构建vue项目

（1）创建工作空间目录e:\workspace

（2）在命令行进入工作空间目录

（3）基于webpack模板生成vue项目hw-vue

vue init webpack hw-vue

发布命令之后，按照提示进行配置：

等待项目构建成功：

（4）查看vue项目hw-vue结构

（5）进入hw-vue项目，发布nmp run dev命令运行项目

（6）在浏览器里访问http://localhost:8080

（三）利用集成开发环境构建vue项目

利用流行的集成开发环境Intellij IDEA来创建vue项目。

（1）在Intellij里安装vue插件

安装完插件之后，重启集成开发环境即可。

（2）新建vue项目hw-vue-test

（3）在终端执行npm run serve命令

（4）在浏览器里访问http://localhost:8081

既可以在终端输入npm run serve命令，也可以采用图形界面的方式来做。

这些命令都是在package.json里预先定义好了的：

（四）Vue项目结构

利用脚手架CLI构建的vue项目，目录结构下图所示：

1、首页文件index.html

2、根组件App.vue

3、入口文件main.js

4、router目录下的index.js（路由文件）

5、HelloWord.vue组件

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>