使用vue/cli 创建一个简单的项目
首先,电脑安装了node.js官方要求8.9 或更高版本 (推荐 8.11.0+)
npm install -g @vue/cli
# OR
yarn global add @vue/cli
全局安装,(由于我用的是yarn 后续都使用yarn进行操作)
安装完成后有键入
vue --version
输出
@ vue/cli 4.2.2
说明安装成功。
开始创建项目
到想要创建项目的地方,键入
vue create demo
回车
选择

然后,空格键选择

之后依据自己的需求选择即可,选择结束后自动会下载相应配置
启动项目
在项目中打开终端,键入
yarn serve
即可启动项目
添加element-ui
在终端中键入
yarn add element-ui
等待下载结束后
在main.js中全局引入element.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'element-ui/lib/theme-chalk/index.css'
import ElementUI from 'element-ui' Vue.config.productionTip = false
Vue.use(ElementUI , { size: 'small'}) new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
已经全局引入了element-ui
之后就可以愉快地写项目了!
使用vue/cli 创建一个简单的项目的更多相关文章
- 软件----- idea 配置创建一个简单javase项目
1.显示工具栏和工具按钮,勾选上 如图,在左侧会增加对应的 2.设置项目结构,选择jdk 点击new 选择需要jdk 3.创建一个简单的java文件,和eclipse与myeslipse 差不多, ...
- vue-cli安装以及创建一个简单的项目(一)(Node\npm\webpack简单使用)
1.关系介绍 1.简单的说 Node.js 就是运行在服务端的 JavaScript. 2.NPM是随同NodeJS一起安装的包管理工具(新版的nodejs已经集成了npm),能解决NodeJS代码部 ...
- vue-cli安装以及创建一个简单的项目(二)(vuex使用、发行一个简单的app)
1.vuex的使用 vuex是vue的状态管理中心,vuex来保存我们需要管理的状态值,值一旦被修改,所有引用该值的地方就会自动更新,常用于: 1.多个视图依赖同一状态(l例:菜单导航) 2.来自不同 ...
- 【Django】01_创建一个简单的项目
1.创建Django项目 点击:file-->new project,出现下面的对话框.选择Django栏目,输入项目名称, 选择python解释器版本,点击create创建. Django将自 ...
- Windows 8.1 应用再出发 (WinJS) - 创建一个简单项目
前面几篇我们介绍了如何利用 C# + XAML 完成Windows Store App 功能的实现,接下来的几篇我们来看看如何利用 Html + WinJS 来完成这些功能. 本篇我们使用WinJS ...
- 使用Cocos studio创建一个简单的project
前不久我接到了一个项目,项目要求使用Cocos2d-X的最新版本号,Cocos2d-X3.4.对于一直在陶醉在Cocos2d-X2.2.3的世界中的我开说,使用Cocos2d-X3.4忽然认为有点不适 ...
- 用IntelliJ IDEA学习Spring--创建一个简单的项目
这段时间想学习一下Spring,其实之前学过Spring,只是有些忘记了.而且之前学的时候是适用eclipse学习的,现在好像对IntelliJ这个工具使用挺多的,现在就学习一下这个工具的用法,顺便复 ...
- Vue Create 创建一个新项目 命令行创建和视图创建
Vue Create 创建一个新项目 命令行创建和视图创建 开始之前 你可以先 >>:cd desktop[将安装目录切换到桌面] >>:vue -V :Vue CLI 3.0 ...
- vue cli创建typescript项目
使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...
随机推荐
- Linux下安装 php imagick扩展
今天小编 由于工作需求用到了 imagick 这个扩展 服务器环境是 lnmp 架构下面稍微来介绍下 这个 东东 imagick是一个PHP的扩展,用ImageMagick提供的API来进行图片的创 ...
- 14-Response
今日知识 1. response 2. ServletContext对象 response * 功能:设置响应消息 1. 设置响应行 1. 格式:HTTP/1.1 200 ok 2. 设置状态码:se ...
- 如何开始阅读ASP.NET Core源代码
背景 当我们对ASP.Net Core内部的某些方法.类的实现感兴趣时,有很多方法可以去了解,看书,看各种文章,但是最直接也是最深入的办法就是去阅读源代码.ASP.NET Core的源代码托管在Git ...
- jmeter接口测试(登录、注册)
Jmeter 进行接口测试流程: Jmeter 的下载地址:http://jmeter.apache.org/download_jmeter.cgi 下面举例说明使用流程,有两种参数传递的方式,我们以 ...
- zabbix 自定义监控项报警给单独的人
需求就是某个交换机的流量达到某个值后需要报警,但报警的内容不是发给所有的人,而是只发给特定的一个人,而其他的报警信息不能让他收到,他只能收到这一个报警项的报警 1:创建好用户定义好手机号 2:新增加一 ...
- Kvm 简介 安装 使用 桥接网络
KVM 全称是 基于内核的虚拟机(Kernel-based Virtual Machine),它是一个 Linux 的一个内核模块,该内核模块使得 Linux 变成了一个 Hypervisor: 它由 ...
- windows系统端口占用
这几天win服务器几个服务总是停止运行,查询原因是端口被占用,解决方法 在dos窗口中使用以下命令 netstat -a 显示所有连接和监听端口 netstat -b 显示包含于创建 ...
- CVE-2020-0668-Windows服务跟踪中的普通特权升级错误
CVE-2020-0668-Windows服务跟踪中的普通特权升级错误 在这里中,我将讨论在Windows Service跟踪中发现的任意文件移动漏洞.从我的测试来看,它影响了从Vista到10的所有 ...
- Docker深入浅出系列 | 容器数据持久化
Docker深入浅出系列 | 容器数据持久化 Docker已经上市很多年,不是什么新鲜事物了,很多企业或者开发同学以前也不多不少有所接触,但是有实操经验的人不多,本系列教程主要偏重实战,尽量讲干货,会 ...
- npm下载文件临时目录、实际存放目录路劲
npm 下载文件临时存放目录 路劲:C:\Users\xxxxxx\AppData\Roaming\npm\node_modules ( C:\Users\dihongwanyan\AppData\R ...