Vue(路由、无痕浏览、nodejs环境搭建,ElementUI简介)

目录

一、vue路由

二、无痕浏览

 三、nodejs环境搭建

四、 ElementUI简介


一、vue路由

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- replace="" 无痕浏览 -->
			<router-link to="index" >首页</router-link>
			<router-link to="guanyu">关于</router-link>
			<router-view></router-view>
		</div>
	</body>
	<script type="text/javascript">
		const index = Vue.extend({
			template: "<div><p>这是首页的内容</p></div>"
		})
		const guanyu = Vue.extend({
			template: "<div><p>这是介绍本站的一个页面</p><div>其他</div></div>"
		})
		// 定义链路集合
		let routes = [{
			path: '/',
			component: index
		}, {
			path: '/index',
			component: index
		}, {
			path: '/guanyu',
			component: guanyu
		}];
		// 定义路由
		const router = new VueRouter({
			routes: routes
		});
		new Vue({
			el: app,
			router,
			data() {
				return {

				}
			}
		})
		
	</script>
</html>

二、无痕浏览

 三、nodejs环境搭建

1、下载nodeJS的安装包

   2、解压nodeJS的解压包,在根目录下新增两个文件夹node_global和node_cache

    3、配置环境变量
        NODE_HOME:配置的是nodeJS解压的根路径E:\nodejs\node-v10.15.3-win-x64

 然后再系统变量那里找到path然后

path:%NODE_HOME%;%NODE_HOME%\node_global

  然后徽标键+R输入cmd进入管理员界面,进去输入

node -v

npm -v

输入这两个可以看到自己的版本,可能有些人的版本不一样和为的出来的也不一样,我的是10.15.3的

     4、配置npm的全局模块的下载地址
           npm config set cache "E:\nodejs\node-v10.15.3-win-x64\node_cache"
        npm config set prefix "E:\nodejs\node-v10.15.3-win-x64\node_global"
        npm config set registry https://registry.npm.taobao.org/

  5、下载github的Vue的项目解压
    6、在解压的项目中是没有node_modules的,在工程的根目录下需要通过npm     install进行再次依赖下载(package.json)

 然后检查一下好没

 

下好之后输入在这里输入npm run dev

 进入到这里就行了

总结:
    1、下载nodeJS的安装包
    2、解压nodeJS的解压包,在根目录下新增两个文件夹node_global和node_cache
    3、配置环境变量
        NODE_HOME:配置的是nodeJS解压的根路径E:\nodejs\node-v10.15.3-win-x64
        path:%NODE_HOME%;%NODE_HOME%\node_global
        node -v
        npm -v
    4、配置npm的全局模块的下载地址
        npm config set cache "E:\nodejs\node-v10.15.3-win-x64\node_cache"
        npm config set prefix "E:\nodejs\node-v10.15.3-win-x64\node_global"
        npm config set registry https://registry.npm.taobao.org/
    5、下载github的Vue的项目解压
    6、在解压的项目中是没有node_modules的,在工程的根目录下需要通过npm              install进行再次依赖下载(package.json)
    7、在通过npm run dev 启动项目

四、 ElementUI简介

Element - The world's most popular Vue UI frameworkElement,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN/component/installation


版权声明:本文为hmjcxy原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。