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

搭建前端框架

前端平台

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

安卓工程师–.xml

node.js

下载

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

安装

建议不要动路径，可以避免很多问题，但是要保证C盘有至少10Gb空间

这里我选择了D盘

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

x86——32位

如果想卸载重新下到C盘

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

js环境，可以编代码了

卸载重新安装到C盘

ok

再试试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>

结果：

Welcome页面

略

路由

Rounter

npm i vue-router@3.5.3

配置

Src->router目录–>index.js

在main.js中配置路由