首页 > 其他 > 详细

安装@vue/cli

时间:2020-07-10 19:10:52      阅读:66      评论:0      收藏:0      [点我收藏+]

Vue CLI 需要 Node.8.9 或更高版本。

输入npm install -g @vue/cli进行安装。

安装成功后输入vue --version检查是否正确。

安装成功vue cli后输入vue create 项目名来进行项目创建。

创建成功后输入npm run serve运行项目,复制网址浏览器输入出现以下页面即为成功。

技术分享图片

 

 

vue cli中的路由。

使用npm install vue-router --save安装路由。

1、首先在components中创建基本Home和About的vue组件

2、引入安装好的路由,在src中创建router文件夹来存放路由

3、在router文件夹中创建index.js来配置路由,相当于路由的一个入口

4、写入以下代码

import Vue from vue
import Router from vue-router

import Home from @/components/Home.vue
import About from @/components/About.vue

Vue.use(Router)

export default new Router({
    routes: [
        { path: /home, component: Home },
        { path: /about, component: About },
        { path: /, redirect: /home }
    ]
}
)

routes配置中的每一项代表一条路由规则。
path是URL路径,可以定义路径参数(如“/product/:id”中的id);name是路由名称,用于引用;
component指定加载的组件名称。
5、在main.js中输入

import router fron ‘/router’

6、在new Vue中使用router

new Vue({
    router,
    render: h => h(App)
}).$mount(#app);

7、在app.vue中使用路由

<template>
  <div>
    <p>这是首页</p>
    <ul>
      <li>
        <router-link to="/Home">Home</router-link>
      </li>
      <li>
        <router-link to="/About">About</router-link>
        
      </li>
    </ul>
      <router-view></router-view>
</div>
</template>

以上,最基本的vue router就创建成功了。

二级路由明天再写。

 

安装@vue/cli

原文:https://www.cnblogs.com/mian-18sui/p/13280154.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!