使用HBuilderX软件快速搭建Vue项目

1.node.js环境下载

node.js相当于java中jdk,但是是在服务器端的 JavaScript,需要通过npm去管理node.js的包,通过npm可以下载node.js中的扩展

①首先下载node.js的安装包

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

②选择node.js的下载路径配置环境变量(一般会自动配置)

与jdk的环境变量配置类似,复制你node.js的安装路径

③配置完环境变量之后可以在cmd中使用node -v与npm -v命令去查看下载node.js是否下载成功

2.创建一个Vue-cli项目

对于后端程序员来说,使用工具进行快速的项目创建是成本最低的方式,这里采用的是HBuilderX软件进行的辅助搭建,Vue项目也可以使用node.js环境中的命令进行搭建,此处不过多阐述

使用HbuilderX可以快捷创建一个vue项目,点击新建时可以选择vue项目的版本,这里选择2.6.10版本

创建之后需要等待一段时间,等待项目创建成功后,右下角会出现一个提示框(这一步需要从服务器端下载许多封装的文件)

项目创建成功后点击Hbuilder底部的命令行窗口中间的图标,可以打开项目的终端,成功打开后使用npm run serve命令即可运行项目

在终端使用ctrl+c命令可以终止项目运行

3.下载组件路由

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

①安装

项目终止后可以在终端中使用npm i vue-router@3.5.3命令下载vue-router插件包

1. 创建 router 目录

在该目录下创建 index.js 文件,在其中配置路由,每次新加入一个组件就需要在index.js中导入

import Vue from 'vue';
import router from 'vue-router'; /* 导入路由 */
/* 导入组件 */
import Login from '../Login.vue';
import Main from '../Main.vue';

Vue.use(router);
/* 定义组件路由 */

var rout = new router({
routes: [{//path是自定义的组件地址path: '/login',name: 'Login',//component是是对应上面导入的组件名称component: Login},{path: '/main',name: 'Main',component: Main}]
});
//导出路由对象
export default rout;

2.使用路由

在主组件App.vue中的template标签写入

< router-link to="/index">首页< /router-link>
< router-link to="/content">内容< /router-link>
< router-view/>

3.在 main.js 中配置路由

import router from './router/index.js'
Vue.use(router);
new Vue({
el: '#app',
router,
render: h => h(App)
})

4.下载elementUI框架

①在终端使用npm i element-ui -S命令下载ElementUI框架

②在 main.js 中写入以下内容：

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

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