环境:

windows:
vue-cli:
编辑器: vsCode
npm: 6.11. #去nodejs网安装https://npm.taobao.org/mirrors/node/v12.12.0/node-v12.12.0-x64.msi

1.安装 :

>npm install -g @vue/cli
# 查看版本
PS D:\vue\project-> vue -V
@vue/cli 4.0.

2.创建项目:

添加淘宝镜像:
npm install -g cnpm --registry=https://registry.npm.taobao.org
创建项目
vue init webpack my-project
或者
vue create project- #这里可以上下选择, 我们选 手动
Vue CLI v4.0.4
? Please pick a preset:
default (babel, eslint)
> Manually select features # 然后根据自己的需求选组件
Vue CLI v4.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project:
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
(*) CSS Pre-processors
>(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing

3.创建路由

3.1 在{项目路径}/src/router/index.js中添加一路由

3.2 在App.vue 中添加 <router-link to="/demo1">Demo1</router-link>

<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/demo1">Demo1</router-link>
</div>
<router-view/>
</div>
</template> <style lang="less">
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
} #nav {
padding: 30px; a {
font-weight: bold;
color: #2c3e50; &.router-link-exact-active {
color: #42b983;
}
}
}
</style>

3.3 创建 Demo1.vue

<template>
<div class="test">
<h1>This is an Demo1 page</h1> </div> </template> <script>
</script> <style lang=""> </style>

3.4 运行项目

>npm run serve

 DONE  Compiled successfully in 3656ms                                                    ::

  App running at:
- Local: http://localhost:8080/
- Network: http://192.168.1.105:8080/ Note that the development build is not optimized.
To create a production build, run npm run build.

3.5 测试,访问 http://localhost:8080/demo1

vue-cli 4 安装与 新建项目 路由的更多相关文章

  1. 使用vue/cli 创建一个简单的项目

    首先,电脑安装了node.js官方要求8.9 或更高版本 (推荐 8.11.0+) npm install -g @vue/cli # OR yarn global add @vue/cli 全局安装 ...

  2. vue——安装并新建项目

    一.对于vue的安装: 1.安装vue之前先安装node,https://nodejs.org/zh-cn/download/,我装的是windows64位的: 2.下载好了之后就可以按照正常顺序安装 ...

  3. 基于vue cli 3.0创建前端项目并安装cube-ui

    前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...

  4. [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍

    一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...

  5. vue cli的安装与使用

    一.简介 vue作为前端开发的热门工具,受到前端开发人员的喜爱.为了简化项目的构建,采用vue cli来简化开发. vue cli是一个全局安装的npm包,提供了终端使用的命令.vue create可 ...

  6. vue cli 3.0快速创建项目

    本地安装vue-cli 前置条件 更新npm到最新版本 命令行运行: npm install -g npmnpm就自动为我们更新到最新版本 淘宝npm镜像使用方法 npm config set reg ...

  7. Vue CLI 介绍安装

    https://cli.vuejs.org/zh/guide/ 介绍 警告 这份文档是对应 @vue/cli 3.x 版本的.老版本的 vue-cli 文档请移步这里. Vue CLI 是一个基于 V ...

  8. vue脚手架安装,新建项目,打包

    1.安装node.js 从node官网下载并安装node,安装步骤很简单,只要一路“next”就可以了. 2.安装cnpm 淘宝镜像 npm install -g cnpm --registry=ht ...

  9. vue学习:安装及创建项目

    1.先安装npm 参考链接:https://www.cnblogs.com/Hao-Killer/p/7235398.html 查看npm版本:在终端输入:npm -v 2.在安装vue # 安装vu ...

随机推荐

  1. Ironic 裸金属实例的部署流程

    目录 文章目录 目录 逻辑架构 部署架构 前提条件 部署流程 iSCSI Deploy UML PXE Deploy Driver Direct Deploy UML IPA Deploy Drive ...

  2. kubernetes排错系列:(一)、机房搬迁导致的节点NotReady

    说下背景: 上周六机房进行搬迁,我所在的网段的机器都重启了一遍.重启之后kubernetes集群不正常.如下 排查过程: # 查看节点信息 kubectl describe nodes cbov10- ...

  3. linux常用命令(19)find xargs

    在使用 find命令的-exec选项处理匹配到的文件时, find命令将所有匹配到的文件一起传递给exec执行.但有些系统对能够传递给exec的命令长度有限制,这样在find命令运行几分钟之后,就会出 ...

  4. centos 7安装redis5

    环境 centos 7 最简安装 官网指导地址:https://redis.io/download 1.yum 安装wget # yum install -y wget 2.安装gcc yum ins ...

  5. [转] An In-Depth Look at the HBase Architecture - HBase架构深度剖析

    [From] https://mapr.com/blog/in-depth-look-hbase-architecture/ In this blog post, I’ll give you an i ...

  6. linux下解决80端口被占用

    安装一个nginx服务,在启动的时候报80端口被占用了,我们来检查一下有哪些服务占用了80端口 首先我们查一下占用80端口的有哪些服务,netstat -lnp|grep 80 查看80端口被那些服务 ...

  7. Centos6.4安装配置mysql

    大数据开发需要读取关系型数据库内的数据,学习过程中主要使用mysql进行学习,以下记录mysql的安装与配置过程. 1.mysql简介 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB公司 ...

  8. spring mvc 异步 DeferredResult

    当一个请求到达API接口,如果该API接口的return返回值是DeferredResult,在没有超时或者DeferredResult对象设置setResult时,接口不会返回,但是Servlet容 ...

  9. elasticsearch的备份和恢复(转)

    vim /etc/elasticsearch/elasticsearch.yml path.repo: ["/data/backups/es_backup"] #备份目录,根据自己 ...

  10. Laravel 查询&数据库&模型

    1.with()与load区别: 都称为 延迟预加载,不同点在于 load()是在已经查询出来的模型上调用,而 with() 则是在 ORM 查询构造器上调用. Order::query()-> ...