vue-cli入门
这也仅仅是入门而已了☺
自己也在慢慢学习中,不对的地方希望大佬可以多多指教,请不吝赐教,感激不尽。
这章主要是搭建环境:
1、安装node环境
从官网下载并安装node,傻瓜操作,安装完成之后,命令行工具输入 node -v ,出现相应的版本号则说明安装成功; npm包管理器是集成在node中的,所以直接输入 npm -v 就会显示npm的版本信息;
2、安装cnpm
由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败 ,可选择安装npm的国内镜像 cnpm
以下命令:
npm install -g cnpm --registry=http://registry.npm.taobao.org
3、安装vue-cli脚手架构建工具
npm install -g vue-cli
以上需要的环境和工具都准备好了,接下来使用vue-cli来构建项目
4、用vue-cli构建项目
先选定目录,创建文件夹,进入文件根目录,命令行安装vue-cli
vue init webpack firstVue
初始化一个项目,webpack是构建工具,也就是说整个项目是基于webpack的,其中 firstVue是项目名称,
回车填写相应的项目名称,描述,作者等信息,不想写可以直接回车默认信息;
目录结构如下:
主要在src中做一些修改;
5、安装项目所需要的依赖
npm install
安装成功之后会有一个node_modules文件夹,这里边就是我们项目需要的依赖包资源,这里就不附图了啊哈哈
6、运行项目
npm run dev
用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果 其中的“run”对应的是package.json文件中,scripts字段中的dev,也就是 node build/dev-server.js命令的一个快捷方式。 项目运行成功后,浏览器会自动打开localhost:8080(如果浏览器没有自动打开,可以手动输入)。运行成功后,会看到如下所示的界面。
以上,ending暂告一段落,下一章会简单写一个项目。蟹蟹
vue-cli入门的更多相关文章
- Vue -cli 入门 --项目搭建(一)
一. 安装node.js环境. 在node.js官网下载稳定版本(https://nodejs.org/en/) 下载完成后点击安装,安装过程很简单,一直next即可,安装完成会自动添加node及np ...
- Vue CLI 3开发中屏蔽的EsLint错误 (.eslintrc.js 在vue3+中 修改这个)
1.关闭eslint校验有了eslint的校验,可以来规范开发人员的代码,是挺好的.但是有些像缩进.空格.空白行之类的规范,在开发过程中一直报错,未免太过于苛刻了.所以,我还是会选择关闭eslint校 ...
- Vue CLi3入门
摘自:https://www.jianshu.com/p/cf9b56efd3b8 Vue CLi3入门 12018.11.15 14:16:17字数 1222阅读 8895 地址 Vue CLi3 ...
- Vue.js 入门:从零开始做一个极简 To-Do 应用
Vue.js 入门:从零开始做一个极简 To-Do 应用 写作时间:2019-12-10版本信息:Vue.js 2.6.10官网文档:https://cn.vuejs.org/ 前言 学习 Vue ...
- Vue项目入门实例
前言 本文记录Vue2.x + Element-UI + TypeScript语法入门实例 为什么要用TypeScript? 1.TypeScript是JavaScript的超集,利用es6语法,实现 ...
- vue 快速入门 系列 —— vue-cli 上
其他章节请看: vue 快速入门 系列 Vue CLI 4.x 上 在 vue loader 一文中我们已经学会从零搭建一个简单的,用于单文件组件开发的脚手架:本篇,我们将全面学习 vue-cli 这 ...
- vue 快速入门 系列 —— vue-cli 下
其他章节请看: vue 快速入门 系列 Vue CLI 4.x 下 在 vue loader 一文中我们已经学会从零搭建一个简单的,用于单文件组件开发的脚手架:本篇,我们将全面学习 vue-cli 这 ...
- vue 快速入门 系列 —— 使用 vue-cli 3 搭建一个项目(上)
其他章节请看: vue 快速入门 系列 使用 vue-cli 3 搭建一个项目(上) 前面我们已经学习了一个成熟的脚手架(vue-cli),笔者希望通过这个脚手架快速搭建系统(或项目).而展开搭建最好 ...
- vue 快速入门 系列 —— 使用 vue-cli 3 搭建一个项目(下)
其他章节请看: vue 快速入门 系列 使用 vue-cli 3 搭建一个项目(下) 上篇 我们已经成功引入 element-ui.axios.mock.iconfont.nprogress,本篇继续 ...
- Vue.js 入门指南之“前传”(含sublime text 3 配置)
题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴 ...
随机推荐
- task 异步 进程与线程的区别
用Wait方法(会以同步的方式来执行),不用Wait则会以异步的方式来执行 要在主线程中等待后台线程执行完毕,可以使用Wait方法(会以同步的方式来执行).不用Wait则会以异步的方式来执行. Tas ...
- File和FileStream的区别
File和FileStream的区别直观点:File是一个静态类:FileStream是一个非静态类.File:是一个文件的类,对文件进行操作.其内部封装了对文件的各种操作(MSDN:提供用于创建.复 ...
- 图论.DP
见题: 看一眼,就知道是个依赖性背包,于是乎就草草的打了树上DP,一交发现才20,仔细检查也没错呀,忍不住点了题解,只喵一眼看到了强联通缩点等的字样,又重新审了一遍题,发现这句话理解有偏差:软件i只有 ...
- tensorflow_目标识别object_detection_api,RuntimeError: main thread is not in main loop,fig = plt.figure(frameon=False)_tkinter.TclError: no display name and no $DISPLAY environment variable
最近在使用目标识别api,但是报错了: File "/usr/local/lib/python2.7/dist-packages/tensorflow/python/ops/script_o ...
- ElasticSearch 2.X升级到6.X遇到的几个问题
1.IndexExists检测索引是否存在,更简洁了,可以这样 _ElasticClient.IndexExists(indices : indexName).Exists 2.索引数据的时候,如果数 ...
- mysql in 子查询 效率慢,对比
desc SELECT id,detail,groupId from hs_knowledge_point where groupId in ( UNION all ) UNION ALL SELEC ...
- Python设计模式 - UML - 定时图(Timing Diagram)
简介 定时图也是一种交互图,用来描述对象或实体随时间变化的状态或值,及其相应的时间或期限约束.定时图应用较广,并不局限于软件工程领域. 定时图侧重与时间线相关的值或状态的改变,这些改变可能来自于收到消 ...
- linux命令总结----转载
1.终端是个奇妙的东西,一开始它的低颜值,高难度可能会令我们灰心气馁. 但是入门之后,你会发现终端命令行是如此强大,简直飞一般的感觉.就是这个feel,倍儿爽~ 享受“弹指间,一切尽在掌握”的感觉. ...
- 19-05【icloud】照片备份
icloud提供了免费的存储空间,5G,超过这个量需要单独购买空间:我用的是50G,每月6元. 如果在mac或者iphone上开启了本地的照片流,则会自动同步到icloud,同时各个设备的客户端(ip ...
- java 中拿项目路径
public class ItemPathInterceptor extends HandlerInterceptorAdapter { @Override public boolean preHan ...