vue-cli项目搭建&elementUI[web前端]-蒲公英云

vue-cli 是官方提供的一个脚手架，是一种集成式项目构建，后期集成一些其它组件时，可以通过命令行自动帮助我们下载，快速生成一个统一的vue项目模板，支持热部署，打包，测试；类似于后端的Maven(只需要给一个jar包的坐标[地址]，工具就会自动下载jar包，并且依赖关联到我们的项目中去)，创建时可以选择一个骨架项目，这个骨架项目就是脚手架，可以使我们的开发更加的快速。

主要的功能

统一的目录结构
本地调试
热部署
单元测试
集成打包上线

需要的环境

Node.js

简单的说Node.js就是运行在服务端的JavaScript，是一个基于Chrome JavaScript运行时建立的一个平台，是一个事件驱动I/O服务端JavaScript环境，基于Google的 V8 引擎，V8 引擎执行 Javascript 的速度非常快，性能非常好。

npm

npm是Node.js 的包管理工具，用来安装各种 Node.js 的扩展；npm 是JavaScript 的包管理工具，也是世界上最大的软件注册表；有超过 60 万个JavaScript 代码包可供下载，每周下载约 30 亿次，npm让JavaScript 开发人员可以轻松地使用其他开发人员共享的代码。

vue-cli 项目搭建步骤

1 安装node前端环境，可以帮助我们去下载其它组件

下载node.js

最新版：下载 | Node.js 中文网
以往版本：以往的版本 | Node.js

下载完成后配置环境变量，步骤如下(安装完后会自动配置)：

测试：可以正常输出版本说明安装成功

2 在HbuilderX中创建一个vue-cli项目(标准的前端项目)

实际是需要通过前端命令创建的

3 项目结构介绍" class="reference-link">快速搭建一个vue-cli项目：3 项目结构介绍

vue-cli项目结构：

单页面项目架构：整个项目中只有一个html，用来被vue对象绑定
，里面提出一个组件的概念Hello.vue，只需要在index.html中切换不同的组件即可，整个项目中始终只用创建一个vue对象即可，这样做一些全局的设置就非常简单，只需要为唯一的vue对象设置即可。
单页面与组件的关系：

4 创建成功后，在命令行窗口启动前端项目" class="reference-link">4 创建成功后，在命令行窗口启动前端项目

前端依赖一个node环境，node环境可以提供一个服务，借助node环境运行项目

npm run serve：具体命令需要看配置文件中如何定义
启动成功后，出现访问项目地址//127.0.0.1:8080/
在命令行中使用快捷键ctrl+c可以停止服务

打开http://127.0.0.1:8080/ ：

终端无法正常打开的几种解决方法：

1. 选中项目——>右键——>打开外部命令——>npm run serve

2. 工具——>插件安装

3. 使用命令，在命令行输入npm run serve

选中项目——>右键——>在外部资源管理器打开——>选中地址：

输入cmd——>回车：

在命令行输入npm run serve：

4. 把项目导入到idea中

选择open or import导入项目——>选择项目地址——>回车打开——>命令行输入npm run serve

组件路由

vue router是Vue.js官方的路由管理器，它和 Vue.js的核心深度集成，让构建单页面应用变得易如反掌。

准备工作

先搭建两个简单组件，一个登录组件，一个注册组件，一会用来测试。

安装

vue-router 是一个插件包，所以我们还是需要用 npm 来进行安装的，打开命令行工具，进入你的项目目录，输入下面命令。

npm i vue-router@3.5.3

下载好后就会自动在package.json中将vue-router这个组件下载下来放在node_modules中

搭建步骤

1 创建路由的配置文件

在src里创建 router 目录，在router目录创建 index.js 文件，在其中配置路由

代码：

import Vue from 'vue'; 
import router from 'vue-router'; /* 导入路由 */ 
/* 导入组件 组件名字一般首字母大写*/
import Login from "../Login.vue";
import Reg from "../Reg.vue";
Vue.use(router);
/* 定义组件路由 */ 
var rout = new router({ 
    routes: [ 
        { 
            path: '/login', //为组件定义地址 一般小写
            name: 'Login', //为组件定义名字(可以不加)
            component: Login
        },
        {
            path: '/reg', 
            component: Reg
        }
    ]
}); 
//导出路由对象 
export default rout;

2 在main.js中配置路由

代码：

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

3 使用

npm run serve启动项目

4 前端项目打包

npm run build
不管我们的项目有多少个组件，打包后的内容放在一个dist目录中，只对外暴露一个index.html，其余的被压缩处理成js文件

ElementUI

Element，一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端组件库。

安装

1 npm安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i element-ui -S

2 CDN

目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入js和css文件即可开始使用。

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

引入 Element

可以引入整个 Element，或是根据需要仅引入部分组件，这里我们以完整引入为例。

完整引入

在 main.js 中写入以下内容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
  el: '#app',
  render: h => h(App)
});

以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。

按需引入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */
new Vue({
  el: '#app',
  render: h => h(App)
});

完整组件列表和引入方式（完整组件列表以 components.json 为准）

import Vue from 'vue';
import {
  Pagination,
  Dialog,
  Autocomplete,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  Menu,
  Submenu,
  MenuItem,
  MenuItemGroup,
  Input,
  InputNumber,
  Radio,
  RadioGroup,
  RadioButton,
  Checkbox,
  CheckboxButton,
  CheckboxGroup,
  Switch,
  Select,
  Option,
  OptionGroup,
  Button,
  ButtonGroup,
  Table,
  TableColumn,
  DatePicker,
  TimeSelect,
  TimePicker,
  Popover,
  Tooltip,
  Breadcrumb,
  BreadcrumbItem,
  Form,
  FormItem,
  Tabs,
  TabPane,
  Tag,
  Tree,
  Alert,
  Slider,
  Icon,
  Row,
  Col,
  Upload,
  Progress,
  Spinner,
  Badge,
  Card,
  Rate,
  Steps,
  Step,
  Carousel,
  CarouselItem,
  Collapse,
  CollapseItem,
  Cascader,
  ColorPicker,
  Transfer,
  Container,
  Header,
  Aside,
  Main,
  Footer,
  Timeline,
  TimelineItem,
  Link,
  Divider,
  Image,
  Calendar,
  Backtop,
  PageHeader,
  CascaderPanel,
  Loading,
  MessageBox,
  Message,
  Notification
} from 'element-ui';
Vue.use(Pagination);
Vue.use(Dialog);
Vue.use(Autocomplete);
Vue.use(Dropdown);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Menu);
Vue.use(Submenu);
Vue.use(MenuItem);
Vue.use(MenuItemGroup);
Vue.use(Input);
Vue.use(InputNumber);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(RadioButton);
Vue.use(Checkbox);
Vue.use(CheckboxButton);
Vue.use(CheckboxGroup);
Vue.use(Switch);
Vue.use(Select);
Vue.use(Option);
Vue.use(OptionGroup);
Vue.use(Button);
Vue.use(ButtonGroup);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(DatePicker);
Vue.use(TimeSelect);
Vue.use(TimePicker);
Vue.use(Popover);
Vue.use(Tooltip);
Vue.use(Breadcrumb);
Vue.use(BreadcrumbItem);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Tabs);
Vue.use(TabPane);
Vue.use(Tag);
Vue.use(Tree);
Vue.use(Alert);
Vue.use(Slider);
Vue.use(Icon);
Vue.use(Row);
Vue.use(Col);
Vue.use(Upload);
Vue.use(Progress);
Vue.use(Spinner);
Vue.use(Badge);
Vue.use(Card);
Vue.use(Rate);
Vue.use(Steps);
Vue.use(Step);
Vue.use(Carousel);
Vue.use(CarouselItem);
Vue.use(Collapse);
Vue.use(CollapseItem);
Vue.use(Cascader);
Vue.use(ColorPicker);
Vue.use(Transfer);
Vue.use(Container);
Vue.use(Header);
Vue.use(Aside);
Vue.use(Main);
Vue.use(Footer);
Vue.use(Timeline);
Vue.use(TimelineItem);
Vue.use(Link);
Vue.use(Divider);
Vue.use(Image);
Vue.use(Calendar);
Vue.use(Backtop);
Vue.use(PageHeader);
Vue.use(CascaderPanel);
Vue.use(Loading.directive);
Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;