Vue脚手架及Vue路由

已于 2022-10-11 20:35:43 修改
阅读量1.5k 收藏
点赞数 2
文章标签： vue.js javascript 前端
于 2022-10-11 20:35:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/c_l_a_n_n_d/article/details/127271039
版权
本文介绍了如何使用Vue CLI创建项目，包括全局安装、项目创建和运行。同时，详细讲解了Vue路由的基本概念，如SPA、Hash路由和History路由，以及路由配置、传参、子路由等，并提到了router-link和router-view组件的使用。
摘要由CSDN通过智能技术生成

    •  脚手架

      • 基于node的环境

        • 创建复杂的vue项目的模板

      • 安装

        • nodejs安装
        • 脚手架全局安装
          npm i -g @vue/cli
        • 检测是否安装成功
          vue -V

      • 创建项目

        • 切换到根目录、项目所需要目录
          cd/
        • vue create myvue
          创建一个myvue项目

      • 运行项目

        • 运行项目
          • cd myvue
        • 切换到项目目录
          • npm run serve

      • 运行项目

        • cd myvue
          切换到项目目录
        • npm run serve
          运行项目

      • .vue文件

        • 1. vue组件
        • 2. 复习vue的语法
最低0.47元/天 解锁文章
wendongsheng1
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue脚手架的安装使用/路由
m0_59642141的博客
10-11 560
vue脚手架的安装配置，与路由使用,小米架构
Vue脚手架与Vue路由
weixin_48345246的博客
10-11 2336
Vue脚手架，Vue路由
vue脚手架搭建项目+router路由配置
m0_52537917的博客
05-08 2801
文章目录一、脚手架搭建项目1、全局安装@vue/cli（仅第一次执行）2、创建项目3、进入项目4、运行项目二、vue-router 路由创建1）路由安装2）创建router配置文件4）在vue项目中使用vue-router 在App.vue文件中5）解决运行报错三、嵌套路由1）子路由配置2）创建vue路由文件3）路由跳转 一、脚手架搭建项目 1、全局安装@vue/cli（仅第一次执行） nmp install -g @vue/cli 2、创建项目 vue create +项目名称 选择版本 ( eg:
Vue项目开发，单文件组件，Vite构建工具与内置 create-vue 脚手架工具，路由
qq_63322025的博客
10-19 755
Vue项目开发，单文件组件，Vite构建工具与内置 create-vue 脚手架工具，路由
vue脚手架初始化项目搭建后配置路由【小白易学】
Leijiang0504的博客
11-13 231
然后最后在src目录下创建一个views,并在下面创建一个Home-index.vue文件就可以。第二步，在我们的src目录下创建一个路由目录router，并在下面创建一个index.js。下载好了之后找到main.js页面,加入router。创建好了index.js文件后，在里面添加以下代码。最后泡一下项目就可以了，有问题滴滴我，非常简单。首先这里你已经创建好项目了，这是跑起来的效果。首先第一步，需要下载路由router。
vue脚手架（纯净版）
07-10
Vue脚手架（Vue CLI）是官方提供的一个命令行工具，旨在简化Vue项目的搭建和配置过程，让开发者能够快速启动新项目。"vue脚手架（纯净版）"通常指的是剥离了某些非必要插件或预设，只保留基础功能的CLI版本，以满足...
解决vue脚手架项目打包后路由视图不显示的问题
10-18
在Vue.js开发过程中，使用Vue CLI创建的脚手架项目是一个高效、便捷的起点。然而，在将项目打包上线时，可能会遇到一些问题，其中之一就是路由视图不显示。本文将详细解析这个问题的原因以及如何解决。 首先，我们...
vue脚手架及vue-router基本使用
08-27
Vue CLI（命令行接口）是官方提供的一个脚手架工具，用于快速搭建 Vue 项目。本文将详细介绍如何使用 Vue CLI 和 Vue Router 进行基本操作。 首先，确保已安装 Vue CLI。在安装好 Vue CLI 并执行 `cnpm install`...
vue脚手架搭建项目及vue学习
最新发布
06-06
在"vue脚手架搭建项目及vue学习"的主题中，我们将深入探讨如何使用Vue CLI（命令行接口）来初始化一个项目，以及Vue的核心概念和关键特性。 1. **Vue CLI的使用**： Vue CLI是一个官方提供的强大脚手架工具，用于...
vue脚手架搭建过程图解
08-27
Vue CLI（命令行接口）或Vue脚手架是一个官方提供的工具，它能帮助开发者快速初始化一个新的Vue项目，包含了一整套自动化构建工具，如编译、热重载、代码分割、优化等。在开始搭建Vue脚手架之前，我们需要确保已经...
Vue-cli(vue脚手架)上万字总结，超详细教程
热门推荐
weixin_45647685的博客
04-02 3万+
1、创建Vue脚手架 1.1、首先系统需要全局安装Vue脚手架 npm install -g @vue/cli 1.2、创建Vue脚手架工程 进入你想创建vue脚手架的目录，然后输入命令 vue create xxx项目名 需要注意的是工程名字不能大写，这里我们选择选择Vue2，敲下回车，那么vue将会为我们创建vue脚手架 显示如图所示说明创建成功 如图命令所示 我们进入myvue工程，执行命令 npm run serve 然后浏览器访问http://localhost:8080/ 到这
脚手架下载 vue指令 v-指令 v-model v-for v-on v-bind v-show/v-if
weixin_68531033的博客
05-26 722
yarn工具命令 下载yarn npm i yarn 脚手架-创建项目-启动服务 选择淘宝镜像源 1.创建项目 vue create vuecli-demo 回车 2.选择vue2 3.选择包管理器 yarn或者NPM 4.等待下载脚手架项目 5.切换脚手架项目下 cd vuecil-demo yarn serve 看到绿色就OK了 问题1 如何切换到淘宝镜像源 .c盘用户找到 .vuerc输入 { "useTaobaoRegistry": true, ...
【vue】vue中的路由vue-router，vue-cli脚手架详细使用教程_vue-cli 路由(1)
2401_84433807的博客
05-09 617
其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）《前端开发四大模块核心知识笔记》最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。
Vue路由详细安装使用方法，脚手架安装使用方法
z27566的博客
10-11 2039
一个网站的所有页面都继承在一个html的文件里面通过切换div模拟页面的切换1，资源公用2，前后端分离3，页面切换流畅1，对搜索SEO引擎不友好地址改变，不刷新页面，监听地址栏变化实现页面局部更新锚点（hash）变化不会刷新页面；H5新增特性。
【vue】vue中的路由vue-router，vue-cli脚手架详细使用教程
景天科技苑
03-22 4090
vue就是我们前面学习的vue基础，vue + vue-router 主要用来做SPA(Single Page Application)，单页面应用 整个网站都是通过一个html文件搞定的。 我们只需要开发组件，页面中有什么组件，就开发什么组件。这些事情都是前端来做的，跟后端没有一点关系。 vue-cli 能创建vue项目，把目录创建好了，哪个地方放组件，哪个地方放css样式等都划分好目录了。类似于我们通过pycharm创建django项目。 而且能vue-cli把整个项目通过socket跑起来。
小白入门vue的脚手架之路由
l8023lzy的博客
10-11 3440
小白入门简要的介绍了vue脚手架，和vue 的路由
Vue脚手架及路由（小白）
Liucaicaia的博客
10-11 898
vue脚手架的初次安装及vue路由
Vue学习笔记 —（下）
scorpio的博客
08-14 262
学习笔记，仅供自己回忆时参考
vue脚手架的安装及路由
m0_68907098的博客
10-11 410
Vue脚手架及路由
vue脚手架配置路由
10-14
在使用 Vue 脚手架创建的项目中，可以通过以下步骤配置路由： 1. 安装 Vue Router：在命令行中运行 `npm install vue-router` 或 `yarn add vue-router`。 2. 在 `src` 目录下创建一个名为 `router` 的文件夹，在该文件夹下创建一个名为 `index.js` 的文件。 3. 在 `index.js` 文件中引入 Vue 和 Vue Router，并使用 `Vue.use()` 方法注册 Vue Router。 4. 创建一个路由实例，并定义路由规则。 5. 在 Vue 实例中引入路由实例，并在 `router` 选项中指定该实例。 以下是一个简单的示例： ```javascript // src/router/index.js import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', // 懒加载 About 组件 component: () => import('../views/About.vue') } ] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) export default router ``` ```javascript // main.js import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false new Vue({ router, render: h => h(App) }).$mount('#app') ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值