环境:

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. CallableStatement获得存储过程多个结果集

    这里使用到的数据库为MySQL package com.dz.entity; import java.sql.*; public class Pro_inoutTest { public static ...

  2. python 学习笔记(一):在列表、字典、集合中根据条件筛选数据

    一.在列表中筛选数据 在列表中筛选出大于等于零的数据,一般通用的用法代码如下: data = [3, -9, 0, 1, -6, 3, -2, 8, -6] #要筛选的原始数据列表 result = ...

  3. Oracle数据库提高sql查询效率总结

    我们要做到不但会写SQL,还要做到写出性能优良的SQL语句. (1)选择最有效率的表名顺序(只在基于规则的优化器中有效): Oracle的解析器按照从右到左的顺序处理FROM子句中的表名,FROM子句 ...

  4. mysql 索引失效的几种情况+

  5. SQL常见面试题(借书卡表_图书表_借书记录表)

    问题描述: 本题用到下面三个关系表: CARD 借书卡:          CNO 卡号,NAME 姓名,CLASS 班级 BOOKS 图书:           BNO 书号,BNAME 书名,AU ...

  6. python-Web-django-富文本编辑器

    views: def gbook(request): '''''' text = request.POST.get('text') soup = BeautifulSoup(text, "h ...

  7. php配置php-fpm启动参数及配置详

    php-fpm 启动参数及重要配置详解 约定几个目录 /usr/local/php/sbin/php-fpm/usr/local/php/etc/php-fpm.conf/usr/local/php/ ...

  8. PJzhang:从js文件中寻找子域名的SubDomainizer

    猫宁!!! 有些专门针对企业客户的网站,可能没有供公开注册的页面,但是在js文件中可能会隐藏他们的注册接口,当然这也是一种安全风险,就像有些后台是一定不能不小心放外网一个道理.   最近看到一篇文章提 ...

  9. fio 硬盘测试工具

    一.windows环境 1. 安装fio:http://www.bluestop.org/fio/ 可以选择不同版本的安装,安装后在C:\Program Files\fio目录中可以找到fio的执行程 ...

  10. USACO4.4 Frame Up【拓扑排序】

    题意居然还读了好久... 读完题目之后大概就知道拓扑排序了.用拓扑可以求出一些字母之间的关系,谁先,谁后.但是这个关系不是唯一确定的,所以就会产生多种方案(题目还要求按字典序输出所有的方案) 输出方案 ...