vue脚手架安装到引入iView框架

小插曲镜像配置

如果你的npm拉取软件包缓慢，请配置以下镜像：

npm config set registry https://registry.npmmirror.com
npm config get registry

配置好后终端应该会返回https://registry.npmmirror.com。

即代表你成功配置npm镜像，因为我们配置了npm淘宝的国内镜像，就不需要使用cnpm了。按照下方教程继续跟进即可。

开始

由于我们课程使用的环境原因，开始之前，请卸载我们前面安装的新版Vue CLI（也称为vue-cli或@vue/cli），不然创建的项目可能导致与我们课程不同步。

打开命令提示符（CMD）：

  • 按下Win + R，输入cmd，然后按下Enter。
  • 在命令行中输入以下命令并执行：
npm uninstall -g @vue/cli

执行这些命令后，Vue CLI 将从你的全局npm包中卸载。
如果你想要清理npm缓存（可选），可以运行以下命令：

npm cache clean --force

请注意，卸载全局包可能会影响其他项目，如果其他项目依赖于该全局安装的Vue CLI版本，那么在那些项目中可能会出现错误。确保在卸载之前，你的项目中都有适当的本地依赖。
如果你遇到任何问题，可以查看Vue CLI的官方文档或搜索社区提供的解决方案。

安装vue-cli旧版本

使用Vue CLI 2.x版本的webpack模板，可以按照以下步骤操作：
a. 首先，安装vue-cli的旧版本：

npm install -g vue-cli

b. 使用vue init命令创建项目：

vue init webpack dm

执行这个命令后，会出现以下步骤：

  • 输入项目名称（默认为dm，可以直接回车）
  • 输入项目描述（可按需填写，也可直接回车）
  • 输入作者（可按需填写，也可直接回车）
  • 选择Vue构建版本（建议选择Runtime + Compiler）
  • 是否安装vue-router（建议安装，输入y）
  • 是否使用ESLint代码规范（根据个人需求选择，输入y或n）
  • 是否使用单元测试（根据个人需求选择，输入y或n）
  • 是否使用e2e测试（根据个人需求选择，输入y或n）
  • 选择预设的npm包管理器（建议选择npm）

注意：如果你的系统使用了steam加速器或者其他加速器，可能出现：

vue-cli · Failed to download repo vuejs-templates/webpack: unable to verify the first certificate

解决方法：此问题原因简单来说是证书问题，退出相关加速器即可，如果没有遇到无需执行任何操作。

完成以上步骤后，项目创建成功。进入项目目录：

cd dm

运行项目
在项目目录下，运行以下命令启动项目：

npm run dev

浏览器会自动打开并显示你的Vue项目。如果浏览器没有自动打开，可以手动访问：http://localhost:8080/，至此，你已经完成了从安装Vue CLI到创建项目的整个过程。

结果如图：
结果示例1

引入iView框架

首先，确保你已经通过npm安装了iView：

npm install iview --save

首先，这是App.vue文件的示例：

<template>
  <div id="app">
    <img src="./assets/logo.png" alt="Vue logo">
    <div class="button-container">
      <a href="https://blog.xingchencloud.top/p/8a0f12d3.html" target="_blank"><Button type="success">Success</Button></a>
    </div>
  </div>
</template>

<script>
import { Button } from 'iview';
import 'iview/dist/styles/iview.css';

export default {
  name: 'App',
  components: {
    Button
  }
}
</script>

<style>
#app {
  text-align: center;
  margin-top: 60px;
}

.button-container {
  margin-top: 20px; /* Adjust the space between logo and button as needed */
}
</style>

这是main.js文件的示例：

import Vue from 'vue';
import App from './App.vue';
import { Button, Table } from 'iview';
import 'iview/dist/styles/iview.css';
Vue.component('Button', Button);
Vue.component('Table', Table);
new Vue({
  el: '#app',
  render: h => h(App)
});

在这个示例中，App.vue文件定义了一个包含iView的Button和Table组件的根元素。main.js文件则初始化了Vue实例，并将其挂载到DOM元素#app上。

按照需求自行修改，如果跟着我的步骤来，得到如下结果：

运行项目（在项目目录中）：

npm run dev

访问终端中输出的网址，结果如图：
结果示例2