10分钟阅读一篇关于Vue

可莉
• 阅读 968

10分钟阅读一篇关于Vue

Vue-cli

Vue脚手架的基本用法,vue脚手架用于快速生成vue项目基础架构:

地址:

https://cli.vuejs.org/zh/

使用方式,安装3.x版本的vue脚手架

npm install -g @vue/cli

功能丰富

对 Babel、TypeScript、ESLint、PostCSS、PWA、单元测试和 End-to-end 测试提供开箱即用的支持。

易于扩展

它的插件系统可以让社区根据常见需求构建和共享可复用的解决方案。

无需 Eject

Vue CLI 完全是可配置的,无需 eject。这样你的项目就可以长期保持更新了。

CLI 之上的图形化界面

通过配套的图形化界面创建、开发和管理你的项目。

即刻创建原型

用单个 Vue 文件即刻实践新的灵感。

面向未来

为现代浏览器轻松产出原生的 ES2015 代码,或将你的 Vue 组件构建为原生的 Web Components 组件。

基于交互式命令行的方式,创建vue项目

vue create my-project

基于图形化界面的方式,创建vue项目

vue ui

基于2.x的方式,创建vue项目

npm install -g @vue/cli-init
vue init webpack my-project

10分钟阅读一篇关于Vue

10分钟阅读一篇关于Vue

10分钟阅读一篇关于Vue

10分钟阅读一篇关于Vue

npm run serve

10分钟阅读一篇关于Vue

10分钟阅读一篇关于Vue

10分钟阅读一篇关于Vue

10分钟阅读一篇关于Vue

10分钟阅读一篇关于Vue

10分钟阅读一篇关于Vue

10分钟阅读一篇关于Vue

10分钟阅读一篇关于Vue

10分钟阅读一篇关于Vue

10分钟阅读一篇关于Vue

10分钟阅读一篇关于Vue

10分钟阅读一篇关于Vue

10分钟阅读一篇关于Vue

10分钟阅读一篇关于Vue

vue脚手架的自定义配置

通过package.json配置项目

"vue":{
 "devServer":{
  "port":"8888",
  "open":true
  }
}

不推荐使用这种配置方式,因为package.json主要用来管理包的配置信息,推荐将vue脚手架相关的配置,单独定义到vue.config.js配置文件中。

Element-UI的使用

它是一套为开发者,设计师和产品经理准备的基于Vue2.0的桌面端组件库。

地址:

http://element-cn.eleme.io/#/zh-CN

10分钟阅读一篇关于Vue

用命令行的方式手动安装

安装依赖包 npm i element-ui -S
导入 Element-UI 相关资源

// 导入组件库
import ElementUI from 'element-ui';
// 导入组件相关样式
import 'element-ui/lib/theme-chalk/index.css';
// 配置vue插件
Vue.use(ElementUI);

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

// 手动配置element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
 router,
 render: h=>h(App)
}).$mount('#app')

10分钟阅读一篇关于Vue

10分钟阅读一篇关于Vue

用图形化界面自动安装

运行vue ui命令,打开图形化界面,通过vue项目管理器,进入具体的项目配置面板,点击插件,添加插件,进入插件查询面板,搜索vue-cli-plugin-element,然后安装。

插件配置

10分钟阅读一篇关于Vue

参考资料:

https://cli.vuejs.org/zh/

在博客平台里,未来的路还很长,也希望自己以后的文章大家能多多支持,多多批评指正,我们一起进步,一起走花路。

非常感谢读者能看到这里,如果这个文章写得还不错,觉得「达达」我有点东西的话,觉得我能够坚持的学习,觉得此人可以交朋友的话, 求点赞👍 求关注❤️ 求分享👥 对暖男我来说真的

非常有用!!!

❤️ 不要忘记留下你学习的脚印 [点赞 收藏 评论]

作者Info:

【作者】:Jeskson

【原创公众号】:达达前端小酒馆。

【福利】:公众号回复 “资料” 送自学资料大礼包(进群分享,想要啥就说哈,看我有没有)!

【转载说明】:转载请说明出处,谢谢合作!~

大前端开发,定位前端开发技术栈博客,PHP后台知识点,web全栈技术领域,数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。谢谢支持,承蒙厚爱!!!

若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。

请点赞!因为你们的赞同/鼓励是我写作的最大动力!

欢迎关注达达的CSDN!

这是一个有质量,有态度的博客

10分钟阅读一篇关于Vue

本文同步分享在 博客“程序员哆啦A梦”(CSDN)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Stella981 Stella981
3年前
Android So动态加载 优雅实现与原理分析
背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载.!(https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png)点击上方“蓝字”关注我
Easter79 Easter79
3年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这