vue-cli 4 安装与 新建项目 路由
环境:
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 安装与 新建项目 路由的更多相关文章
- 使用vue/cli 创建一个简单的项目
首先,电脑安装了node.js官方要求8.9 或更高版本 (推荐 8.11.0+) npm install -g @vue/cli # OR yarn global add @vue/cli 全局安装 ...
- vue——安装并新建项目
一.对于vue的安装: 1.安装vue之前先安装node,https://nodejs.org/zh-cn/download/,我装的是windows64位的: 2.下载好了之后就可以按照正常顺序安装 ...
- 基于vue cli 3.0创建前端项目并安装cube-ui
前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...
- [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍
一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...
- vue cli的安装与使用
一.简介 vue作为前端开发的热门工具,受到前端开发人员的喜爱.为了简化项目的构建,采用vue cli来简化开发. vue cli是一个全局安装的npm包,提供了终端使用的命令.vue create可 ...
- vue cli 3.0快速创建项目
本地安装vue-cli 前置条件 更新npm到最新版本 命令行运行: npm install -g npmnpm就自动为我们更新到最新版本 淘宝npm镜像使用方法 npm config set reg ...
- Vue CLI 介绍安装
https://cli.vuejs.org/zh/guide/ 介绍 警告 这份文档是对应 @vue/cli 3.x 版本的.老版本的 vue-cli 文档请移步这里. Vue CLI 是一个基于 V ...
- vue脚手架安装,新建项目,打包
1.安装node.js 从node官网下载并安装node,安装步骤很简单,只要一路“next”就可以了. 2.安装cnpm 淘宝镜像 npm install -g cnpm --registry=ht ...
- vue学习:安装及创建项目
1.先安装npm 参考链接:https://www.cnblogs.com/Hao-Killer/p/7235398.html 查看npm版本:在终端输入:npm -v 2.在安装vue # 安装vu ...
随机推荐
- Ironic 裸金属实例的部署流程
目录 文章目录 目录 逻辑架构 部署架构 前提条件 部署流程 iSCSI Deploy UML PXE Deploy Driver Direct Deploy UML IPA Deploy Drive ...
- kubernetes排错系列:(一)、机房搬迁导致的节点NotReady
说下背景: 上周六机房进行搬迁,我所在的网段的机器都重启了一遍.重启之后kubernetes集群不正常.如下 排查过程: # 查看节点信息 kubectl describe nodes cbov10- ...
- linux常用命令(19)find xargs
在使用 find命令的-exec选项处理匹配到的文件时, find命令将所有匹配到的文件一起传递给exec执行.但有些系统对能够传递给exec的命令长度有限制,这样在find命令运行几分钟之后,就会出 ...
- centos 7安装redis5
环境 centos 7 最简安装 官网指导地址:https://redis.io/download 1.yum 安装wget # yum install -y wget 2.安装gcc yum ins ...
- [转] 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 ...
- linux下解决80端口被占用
安装一个nginx服务,在启动的时候报80端口被占用了,我们来检查一下有哪些服务占用了80端口 首先我们查一下占用80端口的有哪些服务,netstat -lnp|grep 80 查看80端口被那些服务 ...
- Centos6.4安装配置mysql
大数据开发需要读取关系型数据库内的数据,学习过程中主要使用mysql进行学习,以下记录mysql的安装与配置过程. 1.mysql简介 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB公司 ...
- spring mvc 异步 DeferredResult
当一个请求到达API接口,如果该API接口的return返回值是DeferredResult,在没有超时或者DeferredResult对象设置setResult时,接口不会返回,但是Servlet容 ...
- elasticsearch的备份和恢复(转)
vim /etc/elasticsearch/elasticsearch.yml path.repo: ["/data/backups/es_backup"] #备份目录,根据自己 ...
- Laravel 查询&数据库&模型
1.with()与load区别: 都称为 延迟预加载,不同点在于 load()是在已经查询出来的模型上调用,而 with() 则是在 ORM 查询构造器上调用. Order::query()-> ...