Vue + ElementUI + NodeJS development environment to build

Vue + ElementUI development and traditional development:

About ElementUI
we learn VUE, know that it's the core idea of style components and data driven, but every component you need to write your own templates, styles, add events, and other data are very troublesome,
so hungry yet introduced based on the VUE2.0 component library, its name is called element-ui, provides a rich PC-side components

Element官网: http://element-cn.eleme.io/#/zh-CN

Simple Case:

<! DOCTYPE HTML> 
<HTML> 
	<head> 
		<Meta charset = "UTF-. 8"> 
		<-! 1. Import CSS -> 
		<Link the href = "https://cdn.bootcss.com/element-ui /2.8.2/theme-chalk/index.css "the rel =" this stylesheet "> 
		<-! 2. introducing vue and Router-vue -> 
		<Script the src =" https://cdn.bootcss.com/vue /2.6.10/vue.js "> </ Script> 
		<-! vue unused routing function may import -> 
		<Script the src =" https://cdn.bootcss.com/vue-router/3.0.6 /vue-router.js "> </ Script> 
		<-! 3. ElementUI assembly incorporated -> 
		<Script the src =" https://cdn.bootcss.com/element-ui/2.8.2/index.js "> </ Script> 

		<title> </ title> 
	</ head> 
	<body>
		<div id="app">
			<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>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#app'
		})
	</script>
</html>

　　Display:

Node.js is what
1 Node.js is based Chrome V8 engine [JavaScript runtime environment]. Node.js uses an event-driven, non-blocking I / O model.
2 Node.js is a platform to make JavaScript running in the development server, it allows JavaScript to be with PHP, Python, Perl, Ruby and other server-side scripting language on an equal footing

npm是什么
npm其实是Node.js的包管理工具（package manager）。

为啥我们需要一个包管理工具呢？因为我们在Node.js上开发时，会用到很多别人写的JavaScript代码。
如果我们要使用别人写的某个包，每次都根据名称搜索一下官方网站，下载代码，解压，再使用，非常繁琐。

于是一个集中管理的工具应运而生：大家都把自己开发的模块打包后放到npm官网上，如果要使用，
直接通过npm安装就可以直接用，不用管代码存在哪，应该从哪下载。

更重要的是，如果我们要使用模块A，而模块A又依赖于模块B，模块B又依赖于模块X和模块Y，
npm可以根据依赖关系，把所有依赖的包都下载下来并管理起来。否则，靠我们自己手动管理，肯定既麻烦又容易出错。

注1：npm==maven 有点类似

Node.js环境搭建

下载
下载地址：https://nodejs.org/zh-cn/download/
选择相应的版本下载，这里使用的是：node-v10.15.3-win-x64.zip

解压
将文件解压到指定位置（我这里是D:\ka\InitPath），并在解压后的目录下建立node_global和node_cache这两个目录（

node_global：npm全局安装位置
node_cache：npm缓存路径

）

配置环境变量

新增NODE_HOME ，值2为：D:\ka\InitPath\node-v10.15.3-win-x64(解压的路径名)

在path添加：;%NODE_HOME%;%NODE_HOME%\node_global;

配置npm全局模块路径和cache默认安装位置

打开cmd，分开执行如下命令：
npm config set cache "D:\ka\InitPath\node-v10.15.3-win-x64\node_cache"
npm config set prefix "D:\ka\InitPath\node-v10.15.3-win-x64\node_global"（如果执行命令卡死，可以删除C:\Users\用户名\.npmrc 后重新执行。（用户名：为当前电脑的用户名））

修改npm镜像提高下载速度

设置淘宝源：npm config set registry https://registry.npm.taobao.org/

其实此步骤的内容就是将以下代码添加到C:\Users\用户名\.npmrc文件中

验证安装结果：

版本验证：node -v ，npm -v

查看淘宝镜像设置情况： npm get registry

如何运行下载的Node.js项目

将下载的项目解压到指定目录，本例是解压到：D:\cs\vueproject，后面都以此为例

1. 打开命令窗口（cmd）

2. 切换到d盘

3. 进入指定目录(cd D:\cs\vueproject)

4. 进行依赖安装

命令执行完后，你会发现，项目的根目录下多了一个node_modules文件夹，

那里面就是从npm远程库里下载的模块，然后“安装”到你的项目中，

此步骤，可理解成修改maven的pom文件添加依赖，然后maven再从中央仓库下载依赖

那pom文件在哪里呢？其实就是项目中的package.json

npm install

5. 启动项目

npm run dev

Cmd操作命令，正常运行截图

Vue + ElementUI + NodeJS development environment to build

Guess you like