node环境安装、vue-cli搭建过程、element-UI搭建使用过程
vue-cli 官方提供的一个脚手架，用于快速生成一个 vue 的项目模板；预先定义好的目录结构及基础代码，就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架，我们的开发更加的快速
前端项目架构
1.传统的项目架构
css
img
js
xxx.html
xxx.html
每个html文件都是独立的，需要一些配置时，需要在每个html文件中添加配置，很麻烦
2.现在的前端项目
单文件架构 new 一个vue对象即可，配置也只需要一次即可
提供一套项目构建的模板(类似于后端的maven)需要在前端安装一个node环境 vue
项目中只有一个html文件
所有配置都是对这一个html文件进行配置，只需要配置一次即可
每个vue文件不是单独的页面，而是组件，显示不同内容时，
每个组件都需要进行注册，并定义一个地址
安装node.js环境
下载地址如下：
Node.js — Download Node.js® (nodejs.org)
1.2.选择自己需要的版本进行下载，如图所示：
2.按步骤安装：
在终端进行测试，输入 node -v 和 npm -v 指令，如下图所示。
常用命令
npm install 在线下载node-modules
npm run serve 启动项目
ctrl+c 停止命令
npm run build 打包项目
npm i vue-router@3.5.3 下载对应的package-lock目录
npm i element-ui -S npm安装
vue-cli搭建过程
打开终端输入命令npm run serve启动项目
或如图使用外部命令点击npm run serve启动项目
运行结果如图
项目结构
创建我们自己的项目时，先将package-lock目录删去，使用命令 npm i vue-router@3.5.3 重新下载自己需要的目录，并将App.vue中内容修改
1.在App.vue文件中
使用router-view标签来显示不同的组件
<template>
<!-- router-view来显示不同的组件的 -->
<div id="app">
<router-view>
</router-view>
</div>
</template>
<script>
</script>
<style>
</style>2.创建vue文件
一个.vue文件是一个组件,可以理解为一个页面,但是和页面不同
内容都写在一个template标签中,
vue文件的模板
<template>
/* template标签中必须有一个根标签 */
<div>
</div>
</template>
<script>
/* 与vue框架相似，在return中定义数据，在methods中定义函数 */
/* 导出组件,并为组件定义数据,函数,生命周期函数 */
export default{
data(){
return{
}
},
methods:{
}
}
</script>
<style>
/* 使用css对组件进行封装 */
</style>3. 创建 router 目录
创建 index.js 文件,在其中配置路由
/* 为组件配置路由地址 */
import Vue from 'vue';
import router from 'vue-router'; /* 导入路由 */
/* 导入我们自己的组件 */
import Index from "../Index.vue";
import Login from "../Login.vue";//..表示上一级目录
import Info from "../Info";
/* 注册 定义组件的路由地址 */
Vue.use(router);
/* 定义组件路由 */
var rout = new router({
routes: [
{
path: '/',//设置默认组件，当打开网页时自动打开Index组件
component: Index
},
{
path: '/index',//访问组件的地址，地址名不建议大写
name: 'index',//name可以不写
component: Index
},
{
path: '/login',
component: Login
},
{
path: '/info',
component: Info
}
]
});
//导出路由对象
export default rout;4.使用路由
在需要的vue组件中使用 router-link to="/地址" 地址小写
可以跳转到地址表示的组件上
<template>
<div>
<router-link to="/login">登录</router-link>
<router-link to="/info">详细信息</router-link>
</div>
</template>5.在 main.js 中配置路由
/* 导入组件路由配置 */
import router from './router/index.js';
Vue.use(router)
new Vue({
render: h => h(App),
router,
}).$mount('#app')element-UI搭建使用过程
打开命令行工具使用npm i element-ui -S 命令安装npm，并将以下内容写入main.js文件中
/* 导入elementUI */
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);上述步骤完成后就可以在Element - 网站快速成型工具寻找需要的组件来进行前端代码
打开网页找到需要的组件后，点击显示代码，就可以将代码显示，并对其中内容复制，粘贴到我们自己所写的vue文件中
如按钮组件，我们只需要第一行的按钮，只需将代码中所圈选的内容写入即可
将代码写入Index.vue文件中
<template>
<div>
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
</div>
</template>