Vue的安装和项目搭建

1.安装node.js

http://nodejs.cn/download/(最新版)

https://nodejs.org/zh-cn/download/releases/(以往版本)

安装

 

点击Install

会在所选下载的位置文档中  看到node.js

配置环境变量

安装完毕后 输入 node -v命令 查看node是否安装配置正确

输入npm -v 命令查看是否 安装 npm

测试出现以下结果 说明安装配置完成（数字不同也可）

2. 创建vue-cli 项目

使用 HbuilderX 快速搭建一个 vue-cli 项目

 

创建成功后,在命令行窗口 输入 npm run serve 启动项目 

  

启动成功后,会出现访问项目地址: http://127.0.0.1:8080/

 在命令行中 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 文件,在其中配置路由

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

}

]

}

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;

这样一个Vue项目就搭建好了 该项目可以使用ElementUI的功能 可以发送网略请求 可以使用路由功能