环境要求

• node环境安装

安装node首先需要到官网(nodejs.cn/download/) ，根据自己的电脑环境选择并下载安装包，安装包下载下来按提示一步步操作即可安装成功，具体安装细节这里就不作详细介绍了。

安装成功后可以执行以下命令进行验证，结果输出版本号即安装成功：

node -v

npm -v

建议：npm默认是官方数据源，推荐切换成淘宝镜像：

npm config set registry registry.npm.taobao.org

• 安装vue-cli

npm install -g @vue/cli

执行命令验证是否安装成功：

vue -V

项目创建

• 使用vue-cli初始化项目：

执行命令vue create （项目名）进行项目初始化：

vue create my-permission

命令执行的选项提示可直接回车默认配置即可

• 项目运行

按上图指示，输入以下命令进入项目路径：

cd my-permission

在项目路径下，输入以下命令运行项目：

npm run serve

• 异常情况

果不其然项目运行并没有那么顺利，初始使用的话还是有可能出错的，遇到错误不要慌，详细看一下错误信息（如下图）就是项目默认会依赖的一些包的版本不对，我们只需对这些包进行版本替换就可以：

如图错误信息Error: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the dependency tree.不难看出是由于没有依赖的vue包，这里我们只需把对应版本的vue依赖进来即可：

npm install vue@3.2.13 --save-dev

最后再重新执行命令npm run serve即可正常启动项目：

如图红线框的位置即项目的地址，我们可以直接通过浏览器访问，就能够进入项目的页面：

到这里项目的基础搭建就完成了。

项目目录介绍

按照上面初始化好的步骤，我们能够看到的项目结构如下：

接下来我们一一分析一些主要文件的作用：

• node_modules：npm依赖的模块代码，类似java后端的maven依赖
• public：通常用来存放通用公共文件，这里存放了favicon.ico、index.html表示logo图片文件和主页html文件。
• src：也是我们最常用到的资源目录，里面细分如下：
  • assets：存放静态资源。
  • components：存放自定义组件，如图有HelloWorld.vue组件。
  • App.vue：表示网页根组件，所有其他页面都以此为基础进行组件添加。
  • main.js：表示最基础的js引用，通过该脚本将App.vue组件渲染到index.html内容。

组件化

前端开发其实跟后端也是一样的，多数前端操作都可以封装成组件，以组件的形式发布出去，通过npm指令下载相关组件进行使用，同时也可以本地封装组件进行使用。

我也不是专业做前端的，了解的也不多，这里就给大家推荐两种ui组件：

• Element UI：element.eleme.io/
• Ant Design Vue：2x.antdv.com/docs/vue/in…

以Ant Design Vue为例引入组件进行使用：

npm i --save ant-design-vue@next

Antd组件开发示例

按照官方文档给出的使用方式，我们进行全局安装组件，修改main.js文件如下：

import { createApp } from 'vue'
import App from './App.vue'
// 引入antd组件和样式
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

const app = createApp(App);
// 全局安装组件
app.use(Antd).mount('#app');

在文档中找到自己想要的组件，可以一键复制代码，或者查看代码自己进行编写：

将修改完整的代码贴到App.vue文件如下：

<template>
  <a-layout class="layout">
    <a-layout-header>
      <div class="logo" />
      <a-menu
        theme="dark"
        mode="horizontal"
        v-model:selectedKeys="selectedKeys"
        :style="{ lineHeight: '64px' }"
      >
        <a-menu-item key="1">nav 1</a-menu-item>
        <a-menu-item key="2">nav 2</a-menu-item>
        <a-menu-item key="3">nav 3</a-menu-item>
      </a-menu>
    </a-layout-header>
    <a-layout-content style="padding: 0 50px">
      <a-breadcrumb style="margin: 16px 0">
        <a-breadcrumb-item>Home</a-breadcrumb-item>
        <a-breadcrumb-item>List</a-breadcrumb-item>
        <a-breadcrumb-item>App</a-breadcrumb-item>
      </a-breadcrumb>
      <div :style="{ background: '#fff', padding: '24px', minHeight: '280px' }"><HelloWorld></HelloWorld></div>
    </a-layout-content>
    <a-layout-footer style="text-align: center">
      Ant Design ©2018 Created by Ant UED
    </a-layout-footer>
  </a-layout>
</template>
<script>
import { defineComponent, ref } from 'vue';
import HelloWorld from './components/HelloWorld.vue';

export default defineComponent({
  components: {
    HelloWorld
  },
  setup() {
    return {
      selectedKeys: ref(['2']),
    };
  },
});
</script>
<style>
.site-layout-content {
  min-height: 280px;
  padding: 24px;
  background: #fff;
}
#components-layout-demo-top .logo {
  float: left;
  width: 120px;
  height: 31px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.3);
}
.ant-row-rtl #components-layout-demo-top .logo {
  float: right;
  margin: 16px 0 16px 24px;
}

[data-theme='dark'] .site-layout-content {
  background: #141414;
}
</style>

如此我们将原有的HelloWorld.vue作为组件引入到页面内容中，查看结果如下：

更多的组件使用方式，可以进入官方文档进行查阅（小白还是建议多动手自己试试才知道）：

总结

学习是一个过程，我们也都只是工具的使用者，多动动手熟悉它的使用方式，便能够熟练的掌握这门语言的编程技巧。