vue安装router命令（vue中router的配置）



1.Vue-cli：
Vue-cli 是专门搭建 vue 开发环境的脚手架；

2.安装 Vue-cli：
（1）安装：npm install vue-cli -g

（2）检测是否安装，查看版本：vue -V

3.创建项目：
（1）vue create 自己的项目名称（完成之后会生成含有自己项目名称的文件夹，也就是自己的项目）；

　　第一次创建项目 不需要太多依赖 只选择babel —>package.json

（2）跳转的自己的项目文件夹中：cd 项目名称；

（3）安装所有的插件：npm install；

（4）写完自己的项目之后，进行打包：npm run build（会生成一个 dist 文件夹（需要上线的文件夹），会将自己写的所有 js 文件合并在一个 build.js 中）；

（5）最后运行服务：npm run dev；

4.路由：

　　直接在vue的项目中根目录中安装 命令：vue add router（安装过程中会提示，是否在路由中使用历史模式，路由分为历史模式和hash模式）

　　安装完成后 配置路由:main.js

　　在main.js中通过路由设置了两个访问路径：

　　大概意思就是，当访问路径“/”时，跳转到组件Home页面，当访问路径“/helloworld”时，跳转到组件HelloWorld页面。

　　注意：import(导入)路由和使用到的组件。

　　在main.js中通过new Vue实例化了一个Vue对象，其中

　　router：使用配置的路由；

　　el（element）：需要获取的元素，一定是html中的根容器元素，这样就把main.js文件和index.html文件联系起来了；

　　component/template:使用 components 属性注册需要用到的组件App.Vue

App.vue代码如下：

每个.vue文件中包含三部分内容：

（1）template模板：html结构

（2）script行为：处理逻辑

（3）style样式：解决样式

<router-link> </router-link> 相当于a标签，通过to属性指定目标地址

<router-view></router-view>路由匹配到的组件将渲染在这里。

css作用域：仅在当前页面作用

Home.vue 代码如下：

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/52876.html