vue-cli项目搭建&elementUI[web前端]

发布于：2022-12-02 ⋅ 阅读:(1057) ⋅ 点赞:(0)

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

a7257b297fb74f5cac7649bab275c205.jpeg

 

034028a303224f9b9e673dc7d597dcc2.jpeg

 

35116e582acf4f9cbd037064fc1b7ad8.jpeg

 

cc406ebc48964028bff5a5eb374c1805.jpeg

 

6d4cc7a7a8e84372bd5c0c0617251e54.jpeg

 

0d45a6e7221243b09be151f2bd26f7a1.jpeg

 

bcabda97d3794f8e9173e492704b6ba4.jpeg

 

fed19206f36345c1aa46ac600a5d9570.jpeg

 

344dfffdba6a4d2ab2a35fd4416689f9.jpeg

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

009badf52e25412698990e9590f75dcd.jpeg

f13704910d12410ca5e4eeb868fa483f.jpeg

ffeb0b8d5580469093f7bf53b85e9e86.jpeg

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

b376b4f1492c4aa3b524c469e2dd18d0.jpeg

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

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

快速搭建一个vue-cli项目：51d9bf43af194e59bfac517dfd11fa81.jpeg3 项目结构介绍

vue-cli项目结构：

a1fdd825c4b84d749b6f21b787f748fd.png

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

  • 单页面与组件的关系：

41c32faebc084c2d8eb8a2ca6f54dc9f.jpeg4 创建成功后，在命令行窗口启动前端项目

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

76c3636393df4c4a98240f924255b1ea.jpeg

  • npm run serve：具体命令需要看配置文件中如何定义

  • 在命令行中使用快捷键ctrl+c可以停止服务

981aa41bca574fd887871a8bac046f5f.jpeg

 打开http://127.0.0.1:8080/ ：

73fc0eaa93dd4654bf430426641c423f.jpeg

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

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

e84e8c3cdcfe48319829e544fe610f02.jpeg

2. 工具---->插件安装

646a466d7f05494fb5109db3ce2184e8.jpeg

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

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

be831a322a9741e997665bcd103e333a.png

输入cmd---->回车：8dba3a9d58a944829294ab6ac1054a9d.png

 在命令行输入npm run serve：3acb860607f146238cc9b00f695fe5ea.png

 4. 把项目导入到idea中

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

0b85475f53134a82ac02f9e9008b83e9.png

 

524aa8a8cebc4e2f942e7f44fbea343d.png

组件路由

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

准备工作

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

0edf3672ba8043acab741de3312b9556.png

2c4701dc93d04c00b14d6e1de6ef1879.png

安装

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

npm i vue-router@3.5.3

4aa0e473b4f14cdc809087d422033cbb.png

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

da5f4af193a54cee842afe75694dfe2b.png

f80796f2a54f485189c5747b4d6bd687.png

搭建步骤

1 创建路由的配置文件

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

c9054215e5664a58bda0de2dfc021641.png

代码：

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中配置路由

f71edc4f7d234071952dce8159d3d8b5.png

代码：

import router from './router/index.js'
Vue.use(router)

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

3 使用

  • npm run serve启动项目

c9ee60170603431a9719a67e788197a6.gif

 4 前端项目打包

  • npm run build

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

7dda723c885f4c619db65b6ed4e08fc3.png

ElementUI

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

安装

1 npm安装

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

npm i element-ui -S

328739323d9f47978f470e7afdb95ad3.png

5faea4b020b2425f85d0f61ad857a459.png

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 的引入。需要注意的是，样式文件需要单独引入。

f5440dba41af47cbb47dfb96feaa721c.png

按需引入

借助 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;

 具体组件使用参考 API 文档： 组件 | Element

 

本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布