vue路由与nodeJS环境搭建

简介: vue路由与nodeJS环境搭建
  • vue路由
  • nodeJS环境搭建

1.vue路由

路由思路

1、确保引入Vue.vue-router的js依赖

2、首先需要定义组件(就是展示不同的页面效果)

3、需要将不同的组件放入一个容器中(路由集合)

4、将路由集合组装成路由器

5、将路由挂载到Vue实例中

6、定义锚点

7、跳转


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <!-- 1.导入路由所需依赖 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>
    <title>路由</title>
  </head>
  <body>
    <div id="app">
      <!-- {{name}}
      需求,点击首页,显示网站首页内容;
      点击关于,显示本站创始人介绍,以及网站的发展史;
      通过分析,需要定义两个组件,一个组件对应网站首页内容,
      另一个组件对应本站创始人介绍,以及网站的发展史 -->
      <!-- 6.触发路由事件的按钮 -->
      <router-link to="/home">首页</router-link>
      <router-link to="/about">关于</router-link>
      <!-- 7.定义锚点,路由内容   -->
      <router-view></router-view>
    </div>
    <script type="text/javascript">
      // 2对应两个组件
      var Home=Vue.extend({
        template:'<div>网页首页内容</div>'
      });
      var About=Vue.extend({
        template:'<div>本站创始人介绍,以及网站的发展史</div>'
      });
      // 3.定义组件与路径对应关系
      var routes=[{
        component:Home,
        path:'/home'
      },{
        component:About,
        path:'/about'
      }];
      // 4.通过路由关系获取路由对象router
        var router= new VueRouter({routes});
      // 5.router挂载在vue实例中
      new Vue({
        el:'#app',
        router,
        data(){
          return{
            name:'aa'
          };
        }
      });
    </script>
  </body>
</html>

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 启动项目


目录
相关文章
|
24天前
|
JavaScript 前端开发 jenkins
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
53 10
|
4月前
|
资源调度 JavaScript 前端开发
路由管理:Vue Router的使用和配置技巧
【10月更文挑战第21天】路由管理:Vue Router的使用和配置技巧
78 3
|
4月前
|
JavaScript API
vue 批量自动引入并注册组件或路由等等
【10月更文挑战第12天】 vue 批量自动引入并注册组件或路由等等
|
4月前
|
JavaScript 前端开发 API
vue3中常用插件的使用方法:按需引入自定义组件,自动导入依赖包,自动生成路由,自动生成模拟数据
vue3中常用插件的使用方法:按需引入自定义组件,自动导入依赖包,自动生成路由,自动生成模拟数据
1142 0
|
4月前
|
JavaScript 前端开发 UED
vue中vue-router路由懒加载(按需加载)的作用以及常见的实现方法
vue中vue-router路由懒加载(按需加载)的作用以及常见的实现方法
279 1
|
4月前
|
JavaScript
Node.js 路由
10月更文挑战第5天
34 2
|
4月前
|
JavaScript 前端开发 UED
|
3月前
|
JavaScript UED
"Vue实战技巧大揭秘:一招解决路由跳转页面不回顶部难题,让你的单页面应用用户体验飙升!"
【10月更文挑战第23天】在Vue单页面应用中,点击路由跳转时,默认情况下页面不会自动滚动到顶部,这可能影响用户体验。本文通过一个新闻网站的案例,介绍了如何使用Vue-router的全局前置守卫和`scrollBehavior`方法,实现路由跳转时页面自动滚动到顶部的功能,提升用户浏览体验。
174 0
|
4月前
|
JavaScript API
Vue中使用require.context()自动引入组件和自动生成路由的方法介绍
Vue中使用require.context()自动引入组件和自动生成路由的方法介绍
129 0
|
4月前
|
JavaScript
Vue路由传参实战指南:三种常用方法示例演示
Vue路由传参实战指南:三种常用方法示例演示
193 0

热门文章

最新文章