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

╰+攻爆jí腚メ 2024-04-03 08:35 209阅读 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

*  最新版：[下载 | Node.js 中文网][_ Node.js]
 *  以往版本：[以往的版本 | Node.js][_ Node.js 1]

![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.jpeg][]3 项目结构介绍 ####

vue-cli项目结构：

![a1fdd825c4b84d749b6f21b787f748fd.png][]

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

*  单页面与组件的关系：

#### ![41c32faebc084c2d8eb8a2ca6f54dc9f.jpeg][]4 创建成功后，在命令行窗口启动前端项目 ####

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

![76c3636393df4c4a98240f924255b1ea.jpeg][]

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

*  启动成功后，出现访问项目地址:[http://127.0.0.1:8080/][http_127.0.0.1_8080]

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

![981aa41bca574fd887871a8bac046f5f.jpeg][]

打开[http://127.0.0.1:8080/][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][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][_ Element]

[_ Node.js]: http://nodejs.cn/download/
[_ Node.js 1]: https://nodejs.org/zh-cn/download/releases/
[a7257b297fb74f5cac7649bab275c205.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/8f0d18eec8c2405193120f34640caea9.jpeg
[034028a303224f9b9e673dc7d597dcc2.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/d92c79c7bee04777800507c58fcef1ae.jpeg
[35116e582acf4f9cbd037064fc1b7ad8.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/8e3a3011a0b1470bb17fa0f6aa852c8b.jpeg
[cc406ebc48964028bff5a5eb374c1805.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/97877607065c4cad9e9335895c2760a4.jpeg
[6d4cc7a7a8e84372bd5c0c0617251e54.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/9044b6c137eb4b06b57621e1da815a42.jpeg
[0d45a6e7221243b09be151f2bd26f7a1.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/5903bf61e9084e0fb9fb9888318ccc04.jpeg
[bcabda97d3794f8e9173e492704b6ba4.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/a108124cd37f42ebbb1221249203ba07.jpeg
[fed19206f36345c1aa46ac600a5d9570.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/5695c24d529d40c3a3295ca803550a6b.jpeg
[344dfffdba6a4d2ab2a35fd4416689f9.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/2ddedf55ae154f71893cf34f6849de8d.jpeg
[009badf52e25412698990e9590f75dcd.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/b7c792c4c4a549c1adbc0988034da3f4.jpeg
[f13704910d12410ca5e4eeb868fa483f.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/16f0c6b3d1ae4e67acd863e017b12ba2.jpeg
[ffeb0b8d5580469093f7bf53b85e9e86.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/5deefa8820aa4795836c40abcbcf3013.jpeg
[b376b4f1492c4aa3b524c469e2dd18d0.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/d75ffcbe029b4fdfa823c8bc999812f6.jpeg
[51d9bf43af194e59bfac517dfd11fa81.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/c47c31a746df43ea841141e1c855d403.jpeg
[a1fdd825c4b84d749b6f21b787f748fd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/50e71be0967d44b1a40bea3f28c37ddb.png
[41c32faebc084c2d8eb8a2ca6f54dc9f.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/ee6a9ad817064e6284461fce0744c290.jpeg
[76c3636393df4c4a98240f924255b1ea.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/f63c453cfe4c476d9d4f2a7eb75ac736.jpeg
[http_127.0.0.1_8080]: http://127.0.0.1:8080/
[981aa41bca574fd887871a8bac046f5f.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/4dd1a023dbe049b48c4328a1aa8472a1.jpeg
[73fc0eaa93dd4654bf430426641c423f.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/8261a51801934aab9f28dcea60c0c052.jpeg
[e84e8c3cdcfe48319829e544fe610f02.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/57e00317c5b0449a87301579414cf63e.jpeg
[646a466d7f05494fb5109db3ce2184e8.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/08b70e7a201f41a99454bf8cba169547.jpeg
[be831a322a9741e997665bcd103e333a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/2483d06adaa24d4e94214359e5d3e420.png
[8dba3a9d58a944829294ab6ac1054a9d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/f7a8dbfec33446eb89c747e6455fb411.png
[3acb860607f146238cc9b00f695fe5ea.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/95509f34bad8471db87521ee110138e5.png
[0b85475f53134a82ac02f9e9008b83e9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/7e5b8a8b569940cca25b0cc51af07474.png
[524aa8a8cebc4e2f942e7f44fbea343d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/ed474483f63f4af08a131bf143f4b4c1.png
[0edf3672ba8043acab741de3312b9556.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/aa19f2c1ddba47129ba74515011d9a68.png
[2c4701dc93d04c00b14d6e1de6ef1879.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/453dad44bb2340f388eea4543c4e3b17.png
[4aa0e473b4f14cdc809087d422033cbb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/3177a4ba33354457bfbd6c211f219274.png
[da5f4af193a54cee842afe75694dfe2b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/a9b470c4019d40ce8f0af5e81259dffa.png
[f80796f2a54f485189c5747b4d6bd687.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/7a828825ae314bfebec51915ea27954c.png
[c9054215e5664a58bda0de2dfc021641.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/e06fee7737a84e979b2c94ee6ec835b4.png
[f71edc4f7d234071952dce8159d3d8b5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/b4c7ddb3595f46df9fc6490157e6e8ec.png
[c9ee60170603431a9719a67e788197a6.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/37542bccb16d4412b8a0e2e49368c073.gif
[7dda723c885f4c619db65b6ed4e08fc3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/59e524e7bcd3477f8acc81038f39079b.png
[webpack]: https://webpack.js.org/
[328739323d9f47978f470e7afdb95ad3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/7dd6510746964e7eb35e7b234a6e83aa.png
[5faea4b020b2425f85d0f61ad857a459.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/f421440e39034a05adf2715bffd3c9d9.png
[unpkg.com_element-ui]: https://unpkg.com/element-ui/
[f5440dba41af47cbb47dfb96feaa721c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/8da6ef2bba944838b909eaa02702e4f8.png
[babel-plugin-component]: https://github.com/QingWei-Li/babel-plugin-component
[components.json]: https://github.com/ElemeFE/element/blob/master/components.json
[_ Element]: https://element.eleme.cn/#/zh-CN/component/quickstart