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

科技前沿 • 2025-04-17 22:23 • 阅读 46

大家好，我是讯享网，很高兴认识大家。

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 代码如下：