Vue-cli 搭建简单路由项目

比眉伴天荒 2022-04-15 05:43 254阅读 0赞

# **一、环境** #

## **1. Nodejs安装** ##

### **1） Nodejs下载地址** ###

[http://nodejs.cn/download/][http_nodejs.cn_download]

# **二、安装** #

## **1. 安装vue-cli 及构建项目** ##

### **1) Vue-cli是什么** ###

Vue-cli是由vue官方提供的cli，为单页面应用（SPA）快速搭建繁杂的脚手架。

### **2) 安装** ###

安装nodejs环境

[http://nodejs.cn/download/][http_nodejs.cn_download]

全局安装webpack

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:414.8pt;"> npm install –g webpack </td> 
 </tr> 
 </tbody> 
</table>

全局安装脚手架

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:414.8pt;"> npm install --g vue-cli </td> 
 </tr> 
 </tbody> 
</table>

### **3) 使用vue-cli构建项目** ###

使用命令行进入放置项目的目录，然后使用如下命令进行构建:

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:414.8pt;"> vue init webpack firstVueProject </td> 
 </tr> 
 </tbody> 
</table>

最后一个为项目名（文件夹名）firstVueProject

过程如下：

*  Win+R  输入cmd 进入命令行  cd 路径  进入对应存放项目的路径

![20181122110901727.png][]

*  输入命令行vue init webpack firstVueProject进行构建，显示输入项目名即模板下载完成

![20181122110908484.png][]

*  输入项目名，因为不能使用大写，所以这里我改写成小写，如下图回车：

![20181122110913284.png][]

*  接下来的操作如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1NTE5Mjg_size_16_color_FFFFFF_t_70][]

*  回车等待安装依赖完成，下图为安装完成，红框为提示内容：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1NTE5Mjg_size_16_color_FFFFFF_t_70 1][]

*  提示内容，cd进入对应目录回车，然后在输入npm run dev命令，即可运行

![20181122111304255.png][]

*   等待构建完成，即可浏览器输入：[http://localhost:8080][http_localhost_8080] 进行查看，如下图效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1NTE5Mjg_size_16_color_FFFFFF_t_70 2][]

*  通常会有验证的eslint，汇报一些无关紧要的错误，只要把如下图文件的对应行代码注释，ctrl+c停止项目再npm run dev运行即可：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1NTE5Mjg_size_16_color_FFFFFF_t_70 3][]

# **三、安装UI框架及一些常用插件** #

## **1、Element-ui** ##

### **1）简介** ###

官网：[http://element-cn.eleme.io/\#/zh-CN][http_element-cn.eleme.io_zh-CN]

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

### **2）安装** ###

1）在当前项目文件中运行命令

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:414.8pt;"> npm i element-ui -S </td> 
 </tr> 
 </tbody> 
</table>

示例图如下，等待下载完成：

![20181122111501927.png][]

2）在main.js文件，引入element

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:414.8pt;"> import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); </td> 
 </tr> 
 </tbody> 
</table>

3）测试是否引入成功，在App.vue添加官网的组件button按钮:

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:414.8pt;"> &lt;el-row&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;el-button&gt;默认按钮&lt;/el-button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;el-button type="primary"&gt;主要按钮&lt;/el-button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;el-button type="success"&gt;成功按钮&lt;/el-button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;el-button type="info"&gt;信息按钮&lt;/el-button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;el-button type="warning"&gt;警告按钮&lt;/el-button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;el-button type="danger"&gt;危险按钮&lt;/el-button&gt; &nbsp;&nbsp;&nbsp; &lt;/el-row&gt; </td> 
 </tr> 
 </tbody> 
</table>

效果图如下：

![20181122111512368.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1NTE5Mjg_size_16_color_FFFFFF_t_70 4][]

出现如上图效果即安装引入成功！！

可以直接拷贝官网组件代码，然后进行项目开发。

## **2、Vue-router** ##

### **1）简介** ###

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

### **2）安装** ###

因为在用vue-cli构建项目的时候我们已经使用vue-router，所以main.js已经引入router（vue-router）。

详见使用vue-cli构建过程中，询问是否使用vue-router时回复 ” Y ”，以及main.js中的引入。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1NTE5Mjg_size_16_color_FFFFFF_t_70 5][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1NTE5Mjg_size_16_color_FFFFFF_t_70 6][]

### **3）使用搭建项目单页面。** ###

1）首先在项目src目录先新建一个views用于放置页面模块。然后再views目录下新建一个目录layout，并在该目录新建一个Layout.vue用于作为系统的布局。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1NTE5Mjg_size_16_color_FFFFFF_t_70 7][]

页面编写代码（左右布局）如下：

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:414.8pt;"> &lt;template&gt; &nbsp; &lt;div class="layout-container"&gt; &nbsp;&nbsp;&nbsp; &lt;!-- 左侧菜单 --&gt; &nbsp;&nbsp;&nbsp; &lt;div class="left-con"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 左侧菜单 &nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp; &lt;!-- 右侧内容 --&gt; &nbsp;&nbsp;&nbsp; &lt;div class="center-con"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;!-- router-view 用于视图切换区域 --&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;router-view /&gt; &nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; export default { &nbsp; name: 'Layout', &nbsp; data () { &nbsp;&nbsp;&nbsp; return { &nbsp;&nbsp;&nbsp; } &nbsp; }, &nbsp; mounted () { &nbsp;&nbsp;&nbsp; //&nbsp;&nbsp; 打印一下看看路由 &nbsp;&nbsp;&nbsp; console.log(this.$router.options.routes); &nbsp; } } &lt;/script&gt; &nbsp; &lt;style scoped&gt; .layout-container { &nbsp; width: 100%; &nbsp; height: 100%; &nbsp; position: relative; &nbsp; overflow: hidden; } .layout-container .left-con { &nbsp; position: absolute; &nbsp; width: 180px; &nbsp; height: 100%; &nbsp; left: 0; &nbsp; top: 0; &nbsp; border-right: 1px solid #e6e6e6; &nbsp; overflow: hidden; } .layout-container .left-con .el-menu { &nbsp; border: none; } .layout-container .center-con { &nbsp; position: absolute; &nbsp; left: 180px; &nbsp; top: 0; &nbsp; right: 0; &nbsp; bottom: 0; } &lt;/style&gt; </td> 
 </tr> 
 </tbody> 
</table>

2）添加主页面，src目录下，新建一个dashboard文件夹，里面新建一个index.vue：

![2018112211183870.png][]

添加一些基本代码：

同样的步骤添加测试页面， src目录下，新建一个test文件夹，里面新建一个index.vue：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1NTE5Mjg_size_16_color_FFFFFF_t_70 8][]

添加一些基本代码：

3）将app.vue里面的多余代码删去，添加页面初始化代码，留下如下图代码：

4）修改路由（router/index.js），因为所有页面都要使用“布局”这个界面，所以，先导入Layout.vue作为组件。供所有其他页面使用，如下：

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:414.8pt;"> import Vue from 'vue' import Router from 'vue-router' &nbsp; import Layout from '@/views/layout/Layout' // 布局 // import HelloWorld from '@/components/HelloWorld' import Dashboard from '@/views/dashboard/index' // 首页 import Test from '@/views/test/index' // 测试页面 &nbsp; Vue.use(Router) export default new Router({ &nbsp; routes: [{ &nbsp;&nbsp;&nbsp; path: '/', &nbsp;&nbsp;&nbsp; component: Layout, // 布局 &nbsp;&nbsp;&nbsp; redirect: '/dashboard', // 重定向 &nbsp;&nbsp;&nbsp; name: '首页', &nbsp;&nbsp;&nbsp; children: [{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; path: 'dashboard', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; component: Dashboard // 首页 &nbsp;&nbsp;&nbsp; }] &nbsp; }, { &nbsp;&nbsp;&nbsp; path: '/test', &nbsp;&nbsp;&nbsp; component: Layout, // 布局 &nbsp;&nbsp;&nbsp; redirect: '/test/index', // 重定向 &nbsp;&nbsp;&nbsp; children: [{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; path: 'index', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; component: Test, // 测试页面 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; name: '测试' &nbsp;&nbsp;&nbsp; }] &nbsp; }] }) </td> 
 </tr> 
 </tbody> 
</table>

保存后

查看浏览器直接输入地址访问：[http://localhost:8080][http_localhost_8080 1]（自动重定向[http://localhost:8080/\#/dashboard][http_localhost_8080_dashboard] ） 如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1NTE5Mjg_size_16_color_FFFFFF_t_70 9][]

查看浏览器[http://localhost:8080/\#/test][http_localhost_8080_test] （自定重定向[http://localhost:8080/\#/test/index][http_localhost_8080_test] ）如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1NTE5Mjg_size_16_color_FFFFFF_t_70 10][]

5）接下来完善Layout.vue布局的左侧菜单，先简单实现一级菜单。

示意图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1NTE5Mjg_size_16_color_FFFFFF_t_70 11][]

修改代码部分如下(Ps:样式未修改，这里不再粘贴进来)：

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:414.8pt;"> &lt;template&gt; &nbsp; &lt;div class="layout-container"&gt; &nbsp;&nbsp;&nbsp; &lt;!-- 左侧菜单 --&gt; &nbsp;&nbsp;&nbsp; &lt;div class="left-con"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;el-menu class="el-menu-vertical-demo" :router="true"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;el-menu-item v-for="(item, index) in routesArr" :index="index+''" :route="item" :key="index"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;i class="el-icon-menu"&gt;&lt;/i&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span slot="title"&gt;{ { item.name}}&lt;/span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/el-menu-item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/el-menu&gt; &nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp; &lt;!-- 右侧内容 --&gt; &nbsp;&nbsp;&nbsp; &lt;div class="center-con"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;!-- router-view 用于视图切换区域 --&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;router-view /&gt; &nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp; &lt;/div&gt; &lt;/template&gt; &nbsp; &lt;script&gt; export default { &nbsp; name: "Layout", &nbsp; data() { &nbsp;&nbsp;&nbsp; return { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; routesArr: [ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; name: "首页", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; path: "/dashboard" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; name: "测试", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; path: "/test/index" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ] &nbsp;&nbsp;&nbsp; }; &nbsp; }, &nbsp; mounted() { &nbsp;&nbsp;&nbsp; //&nbsp;&nbsp; 打印一下看看路由 &nbsp;&nbsp;&nbsp; console.log(this.$router.options.routes); &nbsp; } }; &lt;/script&gt; </td> 
 </tr> 
 </tbody> 
</table>

[http_nodejs.cn_download]: http://nodejs.cn/download/
[20181122110901727.png]: /images/20220415/4abd85fa96df447390cca839e9a1bcb4.png
[20181122110908484.png]: /images/20220415/21f17d7a59844102bfe94b6c81bfc986.png
[20181122110913284.png]: /images/20220415/d8dd4867727a4e5bb72a4e7d3ffc1245.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1NTE5Mjg_size_16_color_FFFFFF_t_70]: /images/20220415/762460b9f80c46c8bc671ccd1c45ddc5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1NTE5Mjg_size_16_color_FFFFFF_t_70 1]: /images/20220415/aa9fcbea2c41477887cd8a10e224fa11.png
[20181122111304255.png]: /images/20220415/c3a73b6b8c1441169d6ef3b304eb0d5f.png
[http_localhost_8080]: http://localhost:8080
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1NTE5Mjg_size_16_color_FFFFFF_t_70 2]: /images/20220415/1777e681fb484792b01c9c38a72a3b6b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1NTE5Mjg_size_16_color_FFFFFF_t_70 3]: /images/20220415/08629e87ee114bfba1656204382afe6c.png
[http_element-cn.eleme.io_zh-CN]: http://element-cn.eleme.io/#/zh-CN
[20181122111501927.png]: /images/20220415/0fbd3ba7c7e848cc885905b82f7b9910.png
[20181122111512368.png]: /images/20220415/32b07831ba6d40909eabc4323358eba4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1NTE5Mjg_size_16_color_FFFFFF_t_70 4]: /images/20220415/fb31ed90b8a84aa5b88447bf42bba4a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1NTE5Mjg_size_16_color_FFFFFF_t_70 5]: /images/20220415/37d7bee1bcf8480cb26b7f2f9bf6f225.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1NTE5Mjg_size_16_color_FFFFFF_t_70 6]: /images/20220415/5a303d68d8084cc5b31ddf5da120b79e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1NTE5Mjg_size_16_color_FFFFFF_t_70 7]: /images/20220415/6d73b32e21d440bf905040abd3125586.png
[2018112211183870.png]: /images/20220415/9b682333f9e04cfcab2df8a234f4e8e9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1NTE5Mjg_size_16_color_FFFFFF_t_70 8]: /images/20220415/b49eb6397a234ae0aecfa44a919e13cd.png
[http_localhost_8080 1]: http://localhost:8080/dashboard
[http_localhost_8080_dashboard]: http://localhost:8080/#/dashboard
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1NTE5Mjg_size_16_color_FFFFFF_t_70 9]: /images/20220415/cf6cc48c978e4cdd8c7ccb3c4087e404.png
[http_localhost_8080_test]: http://localhost:8080/#/test/index
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1NTE5Mjg_size_16_color_FFFFFF_t_70 10]: /images/20220415/67a05c76b1c74468a43d89bc9afa4d7a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1NTE5Mjg_size_16_color_FFFFFF_t_70 11]: /images/20220415/f1a014dd2fbf4b2bbcb8d7add73de59c.png