vue(2)学习历程----从iview框架入手
我曾经已经按照vue官网的各种小demo都写了一遍。现在我想做个项目,完整的。我不是专业的前端,写组件恐怕会费很多精力,于是我决定使用iview的组件来完成我的项目。
进行这些之前,我们需要做一些准备工作。
- 从官网下载nodejs
- 检验nodejs是否安装成功 npm -v
- 最好将npm升级到最新版本并全局安装 npm install -g npm
- 选择速度更快的淘宝镜像并全局安装 npm install -g cnpm
- 全局安装脚手架 cnpm install -g vue-cli
- 全局安装webpack cnpm install -g webpack
准备工作完成
我会从两个方式进行展开构建和使用
使用官方http://v1.iviewui.com/docs/gu... 提供的推荐工程 iview-project,在快速上手一栏。
- 将文件夹下载成功之后,在cmd里,切换到所在路径
- 根据其github提示,首先执行命令 cnpm install
- 继续执行命令 cnpm run init
- 最后执行命令 cnpm run dev 此时自动弹出一个浏览器的iview欢迎页面。
使用脚手架,通过可视化方式搭建我的项目。
- cmd切换到要安装项目的路径,创建项目,并写上项目名称 vue init webpack projectname
- 进入安装阶段,Project name(projectname) 项目名称(必须小写),可以指定输入项目名称,也可以直接回车默认用projectname
- Project description(A Vue.js project)项目描述,可以直接回车使用默认的
- Author 作者,输入你的名字
- 接下来有3个选项,字体加粗的是我的选择
Runtime+Compiler:recommended for most users 运行加编译
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 仅运行时 - Install vue-router?(Y/n) 是否安装vue-router 输入Y
- Use ESLint to lint your code?(Y/n) 是否使用ESLint管理代码,ESLint是个代码风格管理工具,用来统一代码风格,为了多人合作。
- Pick an ESLint preset(Use arrow keys) 接下来有3个选项,字体加粗的是我的选择
standard(https://github.com/feross/sta... 标准,github有中文版描述
AirBNB(https://github.com/airbnb/jav... 最合理的方法,githuv有中文版的描述,正是因为它的描述更仔细,所以我选择它
none(configure it yourself)这个不用说,自己定义风格 - Setup unit tests?(Y/n)是否安装单元测试 Y
- Pick a test runner 我选择jest
- Setup e2e tests with Nightwatch(Y/n) 是否安装e2e测试 Y
- 项目搭建好之后,cmd切换到项目目录projectname,输入cnpm install,这条命令是按照项目根目录下的package.json文件中所依赖的模块进行安装,这个文件里面不允许有任何注释,每个使用npm管理的项目中都有这个文件,是npm操作的入口文件。安装完成之后,目录会多出来一个node_modules文件夹,里面存放的是所有依赖的模块。这个文件很大很大,所以大家不会向服务器上传这个文件的。
- 安装iview的命令行是:cnpm install iview --save
- 测试环境是否搭建成功 cnpm run dev
命令行提示我:DONE Compiled successfully in 28938ms
Your application is running here:http://localhost:8081 哈哈成功了哦
如果你想继续输入的话,那么这个链接会作废的,contrl+c之后,继续输入无论是Y还是N,这个链接都不可以用了,所以建议还是重新打开一个cmd窗口使用命令行吧 - 慢慢开发中,我想去掉严格模式,于是把config/index.js里面的dev属性,useEslint设置成false.
- 反正目前iview的官方手册有些问题,比如在定制主题一栏,最终我根据iview-theme的github的说明来做,还好成功了。
vue(2)学习历程----从iview框架入手相关推荐
- Vue新手学习笔记:vue-cli框架
搭建vue-cli项目 作为一个喜欢动手的人,在理论有一定了解的情况下,我选择通过实践来让我记住之前看过的理论,因为我看完就忘 1.安装node.js及npm npm官网地址 下载node,安装很简单 ...
- router vue 回到顶部_小猿圈HTML5学习之基于iview的router常用控制方式
对于互联网发展的今天,IT行业慢慢变成大多数年轻人发展的目标,不仅前景好,薪资也是越来越高的,而web前端是行业中需要的技术,也促进了大多数朋友在学习html5,今天小猿圈讲师给你分享基于iview的 ...
- Vue.js构建用户界面的渐进式框架(前端学习笔记1.0)
文章目录 前言 一.Vue是什么? 二.前端核心分析 1.1.概述 1.2.前端三要素 1.3.结构层(HTML) 1.4.表现层(CSS) 1.5.行为层(JavaScript) 二.前端发展史 2 ...
- html 方式使用iview,VUE之iview框架使用教程
iview框架内含很多预定义的组件,可以直接拿来使用,非常方便. 但iview有一个非常大的问题,就是教程实在非常少,尤其是不懂vue的童鞋更是无从下手. 项目创建过程:首先下载一个官方的demo工程 ...
- Vue+ElementUI+.netcore前后端分离框架开发项目实战
点击上方 "程序员小乐"关注公众号, 星标或置顶一起成长 每天凌晨00点00分, 第一时间与你相约 每日英文 Smile and stop complaining about th ...
- Vue.js学习系列七——Vue服务器渲染Nuxt学习
我又回来啦~这次我们来学习Vue的服务器渲染SSR. 关于SSR的文章网上很多,一开始看得我云里雾里.然后去Vue.js 服务器渲染指南和nuxt官网看了看,发现文章大多都是搬运官网的内容,真正讲的清 ...
- Vue的学习(一:基本使用到路由部分)
官网 https://cn.vuejs.org/ 前言 封装 VS 库 VS 框架 封装通常指一小部分通用业务逻辑,多个封装形成一个模块或者文件,多个模块或者文件就发展成为库或者框架,而插件是为库或者 ...
- asp.net2.0学习历程 菜鸟到中级程序员的飞跃【月儿原创】
asp.net2.0学习历程 菜鸟到中级程序员的飞跃 --30本好书点评 作者:清清月儿 主页:http://blog.csdn.net/21aspnet/ 时间:2007.5.1 ...
- web前端 vue、react、angular三大框架对比 与jquery的对比
前端当前最火的三大框架当属vue.react以及angular了. 但是在做项目的时候,我们怎么去选择呢? 这里做一个比较,希望大家可以有一个比较清晰的认识. vue与react vue和react ...
最新文章
- asp.net 学习笔记 代码块标记
- C#遍历文件读取Word内容以及使用BackgroundWorker对象打造平滑进度条
- LeetCode 1217. 玩筹码(脑筋急转弯)
- 楚留香手游服务器维护,【楚留香手游】4.27日游戏维护公告
- 测试象棋水平用哪个软件好,佳佳象棋软件作者李国来对象棋软件引擎的专业看法及测试指导...
- cad的dwg文件转html文件,多种方式将CAD文件转化为JPG图片
- c语言 统计素数并求和
- 华硕笔记本屏幕亮度怎么调节?屏幕亮度调节方法
- 互联网架构的演进方向
- 原生js实现canvas粒子特效
- 护照验证护照阅读ocr识别
- EasyExcel快速上手
- 淘宝店铺如何做补单计划?
- USB UVC实战笔记第1篇—UVC设备枚举过程详细分析
- Alibaba独家首发“Java成长笔记”,差距不止一点点
- H5+jQuery H5+JavaScript 体质指数BMI计算
- python-优矿-基金20%赎回赚钱概率96.3%
- 数字电位器IC市场现状研究分析与发展前景预测报告
- VoIP(网络电话)
- 垃圾清理软件 CCleaner 5.59 绿色便携优化版
热门文章
- Java爬虫 手机号段 归属地 处理后输出sql文件
- mysql 查询密码 cmd
- springMVC+hibernate + layui分页
- js能订阅mq吗_ActiveMQ+MQTT实现客户端订阅推送模式(一)订阅者
- python课程设计的主要任务是什么_Python网络编程课程设计 任务1.docx
- 空间留言工具_新房,拖把等清洁工具都放哪?
- 帝国cms+php7.0+mysql_帝国cms切换php7.x登录后台空白解决方法
- 固定 顶部_抗拉固定球铰支座优点与施工步骤
- 常州儿童计算机培训,常州推荐儿童编程培训班哪几家靠谱
- python中kmeans怎么导入数据集_通过Python实践K-means算法