做宴会网站,云主机做网站永久保留网站,网站建设相关问题,太原网页设计培训班前言#xff1a; 今天我们来讲解关于Vue的路由使用#xff0c;Node.js下载安装及环境配置教程 一#xff0c;Vue的路由使用 首先我们Vue的路由使用#xff0c;必须要导入官方的依赖的。 BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务https://www.bootcdn.cn/
… 前言 今天我们来讲解关于Vue的路由使用Node.js下载安装及环境配置教程 一Vue的路由使用 首先我们Vue的路由使用必须要导入官方的依赖的。 BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务https://www.bootcdn.cn/
script srchttps://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js/script 路由思路 1、引入路由的js依赖 2、定义组件内容用来显示网页中的内容 3、定义路由路径关系 4、通过路由关系获取对象 5、挂载实例上 6、触发点击事件 7、定锚点展示内容 具体步骤 1、引入路由的js依赖 script srchttps://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js/script 2、定义组件内容用来显示网页中的内容 // 2定义组件内容用来显示网页中的内容var Home Vue.extend({template: div网站首页内容/div});var About Vue.extend({template: span发展历史/span}); 3、定义路由路径关系 //3定义路由路径关系var routes [{component: Home,path: /home},{component: About,path: /about}] 4、通过路由关系获取对象 //4通过路由关系获取对象var router new VueRouter({routes}); 5、挂载实例上 //5挂载实例上new Vue({el: #app,router,data() {// 创造数据以后我们结合后台就会从数据库中获取json格式的数据return {msg: 云}}}) 6、触发点击事件 !-- 6触发点击事件 --router-link to/home点我回首页/router-linkrouter-link to/about关于本网站/router-link 7、定锚点展示内容 !-- 7定锚点展示内容 --router-view/router-view 效果我们点击后上面的刷新按钮是没有刷新的这就意味着我们与后台交互后如果数据量多的话那数据展示就不会停下很长时间。 二Node.js下载安装及环境配置教程 Node.js的介绍 Node.js是一个基于Chrome V8引擎的JavaScript运行环境。 Node.js使用了一个事件驱动、非阻塞式I/O 的模型。Node.js是一个让JavaScript运行在服务端的开发平台它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言 Node.js官网下载 | Node.js (nodejs.org)https://nodejs.org/zh-cn/download
npm是什么 npm其实是Node.js的包管理工具package manager。方便我们项目操作用的。 如果想下载先前版本也可以 下载后是个zip文件安全性高我们解压后通过cmd窗口测试安装是否成功按下【winR】键输入cmd运行黑窗口 输入指令node -v // 显示node.js版本 npm -v // 显示npm版本 成功显示版本说明安装成功
注意事项 node.js的版本区别v14版本以下与以上有着巨大的差别 三、环境配置
1找到安装的目录在安装目录下新建两个文件夹node_globalnode_cache。一定要是在安装node.js的根目录下。
2配置环境变量 新增NODE_HOME值为D:\soft\node-v10.15.3-win-x64 修改PATH并在最后添加window11不用; %NODE_HOME% %NODE_HOME%\node_global 3创建完毕后使用管理员身份打开cmd命令窗口输入 ①npm config set prefix “你的路径\node_global” 复制你刚刚创建的“node_global”文件夹路径 npm config set prefix D:\soft\node-v10.15.3-win-x64\node_global ②npm config set cache “你的路径\node_cache” 复制你刚刚创建的“node_cache”文件夹路径 npm config set cache D:\soft\node-v10.15.3-win-x64\node_cache 4安装淘宝镜像 npm config set registry https://registry.npm.taobao.org/
安装成功后会在C:\Users\用户名\下生成.npmrc文件 四、测试 配置完成后全局安装一个最常用的 express 模块进行测试
npm install express -g // -g代表全局安装 运行解压的项目--》npm i 这里加载的时间比较长 五、安装淘宝镜像
①安装淘宝镜像
npm config set registry https://registry.npm.taobao.org查看是否成功
npm config get registry 这个vue项目私信我可得我们先进到该项目的根目录输入cmd.
启动项目 npm run dev 启动效果
