1.安装node.js
![](https://i-blog.csdnimg.cn/blog_migrate/b2e8e072076f0862239a6ef3cf76a0c3.png)
安装
点击Install
会在所选下载的位置文档中 看到node.js
配置环境变量
安装完毕后 输入 node -v命令 查看node是否安装配置正确
输入npm -v 命令查看是否 安装 npm
测试出现以下结果 说明安装配置完成(数字不同也可)
2. 创建vue-cli 项目
使用 HbuilderX 快速搭建一个 vue-cli 项目
创建成功后,在命令行窗口 输入 npm run serve 启动项目
启动成功后,会出现访问项目地址:
http://127.0.0.1:8080/
![](https://i-blog.csdnimg.cn/blog_migrate/ecc5724dd038c8c8f5813e5eadea2d51.png)
在命令行中 ctrl+c 停止服务 Alt + c 关闭终端窗口
3.安装Vue
在终端窗口中输入 npm install vue 安装 Vue
接下来要安装一些插件
4.安装使用组件路由
vue-router 是一个插件包,所以我们还是需要用 npm 来进行安装的。 打开命令行工具,进入你的项目目录,输入下面命令: npm i vue-router@3.5.3
安装完毕后 进行以下步骤
4.1创建 router 目录
在router下创建 index.js 文件,在其中配置路由
![](https://i-blog.csdnimg.cn/blog_migrate/80454c9c368030d8e69e8b54c2d6abcb.png)
import Vue from 'vue';
import router from 'vue-router'; /*
导入路由
*/
import login from '../views/login'; /*
导入其他组件
*/
import content from '../components/content'; /*
导入其他组件
*/
Vue.use(router)
/*
定义组件路由
*/
var rout = new router({
routes: [
{
path: '/index',
name: 'index',
component: index
},
{
path: '/content',
component: content
}
]
});
//
导出路由对象
export default rout;
4.2.路由嵌套
{
path: '/main',
component: Main, //
路由嵌套 在
main
下面的嵌套子路由
children:[
{
path:"/admin",
component:Admin
}
]
}
![](https://i-blog.csdnimg.cn/blog_migrate/4dce1ac5e0b97c1b3950c4745b09ab02.png)
5.安装 ElementUI
在终端窗口输入 npm i element -ui -S 安装 注意:(-ui和-S前面有一个空格)ElementUI
Element - The world's most popular Vue UI frameworkElement,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/ 该网站中有一些现成的组件可供参考
6.网络请求
网略请求是前后端交互的途径 axios 是一个 HTTP 的网络请求库.
安装:在终端窗口输入 npm install axios
7.配置
最后一步在 main.js中配置以上插件
7.1在 main.js 中配置路由
import router from './router/index.js'
Vue.use(router);
new Vue({
el: '#app',
router,
render: h => h(App)
})
7.2在 main.js 中配置ElementUI:
import
ElementUI
from
'element-ui'
;
import
'element-ui/lib/theme-chalk/index.css'
;
Vue.use(ElementUI);
new Vue({
render: h => h(App),
}).$mount('#app');
7.3在 main.js 中配置 axios
导入 axios
import axios from 'axios';
设置访问后台服务器地址
axios.defaults.baseURL="http://127.0.0.1:9999/api";
将 axios 挂载到 vue 全局对象中,使用 this 可以直接访问
Vue.prototype.$http=axios;
![](https://i-blog.csdnimg.cn/blog_migrate/d7d0be2137d9fd5c701a0f3c37c19772.png)
这样一个Vue项目就搭建好了 该项目可以使用ElementUI的功能 可以发送网略请求 可以使用路由功能