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');
