vue路由与nodeJS环境搭建

  • vue路由
  • nodeJS环境搭建

1.vue路由

路由思路
1、确保引入Vue.vue-router的js依赖
2、首先需要定义组件(就是展示不同的页面效果)
3、需要将不同的组件放入一个容器中(路由集合)
4、将路由集合组装成路由器
5、将路由挂载到Vue实例中
6、定义锚点
7、跳转



	
		
		
		
		
		
		路由
	
	
		
首页 关于

vue路由与nodeJS环境搭建_第1张图片

2.nodeJS环境搭建

    1、下载nodeJS的安装包,下载地址:https://nodejs.org/zh-cn/download/
    2、解压nodeJS的解压包,在根目录下新增两个文件夹node_global和node_cache
    3、配置环境变量
        NODE_HOME:配置的是nodeJS解压的根路径D:\software\node-v10.15.3-win-x64
        path:%NODE_HOME%;%NODE_HOME%\node_global
        测试安装是否成功:打开cmd窗口,输出如下命令会输出NodeJs和npm的版本号

        node -v
        npm -v
    4、配置npm的全局模块的下载地址
        npm config set cache "D:\software\node-v10.15.3-win-x64\node_cache"
        npm config set prefix "D:\software\node-v10.15.3-win-x64\node_global"

        修改npm镜像提高下载速度(可以使用 cnpm 或 直接设置 --registry ,推荐设置 --                    registry)
          ## 设置淘宝源
          npm config set registry https://registry.npm.taobao.org/

          其实此步骤的内容就是将以下代码添加到C:\Users\用户名\.npmrc文件中
          ## 查看源,可以看到设置过的所有的源
          npm config get registry

         查看npm全局路径设置情况
         ## 此步骤随便全局安装一个模块就可以测评
         npm install webpack -g
         ## 以上命令执行完毕后,会生成如下文件
         %node_home%\node_global\node_modules\webpack
        注意:下载过程中出现warn不用管,出现Error,删掉下载的破碎文件重新下载
    5、下载github的Vue的项目解压
    6、在解压的项目中是没有node_modules的,在工程的根目录下需要通过npm              install进行再次依赖下载(package.json)
    7、在通过npm run dev 启动项目

vue路由与nodeJS环境搭建_第2张图片

vue路由与nodeJS环境搭建_第3张图片

vue路由与nodeJS环境搭建_第4张图片

vue路由与nodeJS环境搭建_第5张图片

vue路由与nodeJS环境搭建_第6张图片

vue路由与nodeJS环境搭建_第7张图片

vue路由与nodeJS环境搭建_第8张图片

vue路由与nodeJS环境搭建_第9张图片

vue路由与nodeJS环境搭建_第10张图片

vue路由与nodeJS环境搭建_第11张图片

vue路由与nodeJS环境搭建_第12张图片

vue路由与nodeJS环境搭建_第13张图片

vue路由与nodeJS环境搭建_第14张图片

vue路由与nodeJS环境搭建_第15张图片

你可能感兴趣的:(vue.js,javascript,前端)