Node.js安装(含npm安装vue-cli，安装element-ui）的详细配置

搭建前端框架

前端平台

在这里插入图片描述

量子计算机–10^5级别运算只需5min，这代表可以计算从宇宙大爆炸到现在的数据可以计算

安卓工程师–.xml

在这里插入图片描述

node.js

在这里插入图片描述

下载

在这里插入图片描述

运行在win/linus的js——node.js

16.20.2

安装

建议不要动路径，可以避免很多问题，但是要保证C盘有至少10Gb空间
在这里插入图片描述

在这里插入图片描述
这里我选择了D盘

完成后我们需要查看环境变量是否配置成功

在这里插入图片描述

x86——32位

如果想卸载重新下到C盘

打开控制面板的程序功能选项：

在这里插入图片描述

js环境，可以编代码了

在这里插入图片描述

卸载重新安装到C盘

在这里插入图片描述

再试试js
在这里插入图片描述

看环境变量

在这里插入图片描述

路径

在这里插入图片描述

内存–16G

在这里插入图片描述

查看node版本

node -v

在这里插入图片描述

npm

npm -v

在这里插入图片描述

什么是npm？

简单说

镜像

在这里插入图片描述

查看

在这里插入图片描述

注册 npm镜像更换

npm config set registry https://registry.npmmirror.com

打开命令行 win+r 输入cmd
或者在当前文件的目录下上面打开输入cmd
在这里插入图片描述

在这里插入图片描述

cls --清屏

在这里插入图片描述

-help 帮助文档查看指令（如果忘记指令）

在这里插入图片描述

-i —— install安装

安装vue-cil

在这里插入图片描述

介绍：就是脚手架在这里插入图片描述

安装vue-cli（命令行接口）

在这里插入图片描述

@ 代表： 4以后+“/”安装

npm install -g @vue/cli@4.5.15

在这里插入图片描述

装好了是这样

在这里插入图片描述

vue版本

在这里插入图片描述

查看系统信息

在这里插入图片描述

打开图形页面，【ctrl+鼠标】

创建一个vue项目

如果删不掉vue文件–重启电脑

先创建一个他的文件夹，后面好找，eg：vue-workspace

切换盘符

cd: change directory

cd d:

到指定目录

在这里插入图片描述

创建一个项目

在这里插入图片描述

create

vue create hello-world

对照他的参考文档来
在这里插入图片描述

接下来清仔细操作，错了就关闭重来。

在这里插入图片描述

chose 3rd 在这里插入图片描述

按空格选择，有一个要取消选择哦，再按就可以取消
在这里插入图片描述

选好回车下一步

在这里插入图片描述

n

在这里插入图片描述

好了，接下来请等待……

最终

在这里插入图片描述
下面两个指令接下来介绍
可以直接复制粘贴命令

网址

在这里插入图片描述

c+双击（也可以）

在这里插入图片描述

访问

在这里插入图片描述
关闭当前任务

本机

在这里插入图片描述

可以修改内容，用记事本打开这个文件

re如果你选择错了可以再看一遍这里，通过了请忽略

在这里插入图片描述

另外说一下，引进了很占用内存的

在这里插入图片描述

高端名字——“组件化开发”

删除node.js具体操作

在这里插入图片描述

Vue项目开发

打开目录

在这里插入图片描述

创建项目

在这里插入图片描述
wait……

好了的结构
在这里插入图片描述

认识一下他的项目结构

在这里插入图片描述

重点——package这个文件

外部终端

在这里插入图片描述

ct+c 关闭这个命令行

在这里插入图片描述

页面开发

main.js

在这里插入图片描述

App.vue

在这里插入图片描述

操作顺序：

顺序

在这里插入图片描述

结构

在这里插入图片描述

用户登陆Sys

页面

创建

登录页面
欢迎页面

两个页面

在这里插入图片描述

login.vue

welcome.vue

App.vue引入命令

在这里插入图片描述

再安装ElementUi

在这里插入图片描述

在这里插入图片描述
建立依赖

RE

创建

在这里插入图片描述

npm i element-ui -S

在这里插入图片描述

下载npm

在这里插入图片描述

main.js弓|入elementU!

在这里插入图片描述

、
、

main.js

import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
// 框架
import ElementUI from 'element-ui'
// css
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)
Vue.config.productionTip = false

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

login

app

在这里插入图片描述

来找要抄的

在这里插入图片描述

Login.vue

<template>
	   <el-form>
		   <el-form-item label="用户名" >
		       <el-input type="text" ></el-input>
		     </el-form-item>
		   <el-form-item label="密码" >
		       <el-input type="password" ></el-input>
		     </el-form-item>
			 <el-form-item>
			     <el-button type="primary">提交</el-button>
			     <el-button >重置</el-button>
			   </el-form-item>
	   </el-form>
</template>

<script>
	export default{
		name:'Login'
	}
	
</script>

<style>
</style>

现在还不能输入，现在建立v-model
在这里插入图片描述

可以输入

在这里插入图片描述

<script>
	export default{
		name:'Login',
		data() {
			return{
				user:{
					username:'',
					password:''
				}
			}
		},
		// 与data平行
		methods:{
			show(){
				alert(this.user.username);
			}
		}
	}
	
</script>

在这里插入图片描述

极端做法

在这里插入图片描述

<template>
	   <el-form>
		   <el-form-item label="用户名" >
		       <el-input type="text" v-model='user.username'></el-input>
		     </el-form-item>
		   <el-form-item label="密码" >
		       <el-input type="password" v-model="user.password"></el-input>
		     </el-form-item>
			 <el-form-item>
			     <el-button type="primary" @click="show">提交</el-button>
			     <el-button >重置</el-button>
			   </el-form-item>
	   </el-form>
</template>

<script>
	export default{
		name:'Login',
		data() {
			return{
				user:{
					username:'',
					password:''
				}
			}
		},
		// 与data平行
		methods:{
			show(){
				alert(this.user.username);
			}
		}
	}
	
</script>

<style>
</style>

结果：
在这里插入图片描述