这也仅仅是入门而已了☺

自己也在慢慢学习中,不对的地方希望大佬可以多多指教,请不吝赐教,感激不尽。

这章主要是搭建环境:

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入门的更多相关文章

  1. Vue -cli 入门 --项目搭建(一)

    一. 安装node.js环境. 在node.js官网下载稳定版本(https://nodejs.org/en/) 下载完成后点击安装,安装过程很简单,一直next即可,安装完成会自动添加node及np ...

  2. Vue CLI 3开发中屏蔽的EsLint错误 (.eslintrc.js 在vue3+中 修改这个)

    1.关闭eslint校验有了eslint的校验,可以来规范开发人员的代码,是挺好的.但是有些像缩进.空格.空白行之类的规范,在开发过程中一直报错,未免太过于苛刻了.所以,我还是会选择关闭eslint校 ...

  3. Vue CLi3入门

    摘自:https://www.jianshu.com/p/cf9b56efd3b8 Vue CLi3入门 12018.11.15 14:16:17字数 1222阅读 8895 地址 Vue CLi3 ...

  4. Vue.js 入门:从零开始做一个极简 To-Do 应用

    Vue.js 入门:从零开始做一个极简 To-Do 应用 写作时间:2019-12-10版本信息:Vue.js 2.6.10官网文档:https://cn.vuejs.org/ 前言  学习 Vue ...

  5. Vue项目入门实例

    前言 本文记录Vue2.x + Element-UI + TypeScript语法入门实例 为什么要用TypeScript? 1.TypeScript是JavaScript的超集,利用es6语法,实现 ...

  6. vue 快速入门 系列 —— vue-cli 上

    其他章节请看: vue 快速入门 系列 Vue CLI 4.x 上 在 vue loader 一文中我们已经学会从零搭建一个简单的,用于单文件组件开发的脚手架:本篇,我们将全面学习 vue-cli 这 ...

  7. vue 快速入门 系列 —— vue-cli 下

    其他章节请看: vue 快速入门 系列 Vue CLI 4.x 下 在 vue loader 一文中我们已经学会从零搭建一个简单的,用于单文件组件开发的脚手架:本篇,我们将全面学习 vue-cli 这 ...

  8. vue 快速入门 系列 —— 使用 vue-cli 3 搭建一个项目(上)

    其他章节请看: vue 快速入门 系列 使用 vue-cli 3 搭建一个项目(上) 前面我们已经学习了一个成熟的脚手架(vue-cli),笔者希望通过这个脚手架快速搭建系统(或项目).而展开搭建最好 ...

  9. vue 快速入门 系列 —— 使用 vue-cli 3 搭建一个项目(下)

    其他章节请看: vue 快速入门 系列 使用 vue-cli 3 搭建一个项目(下) 上篇 我们已经成功引入 element-ui.axios.mock.iconfont.nprogress,本篇继续 ...

  10. Vue.js 入门指南之“前传”(含sublime text 3 配置)

    题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴 ...

随机推荐

  1. 使用python备份文件

    想写个定时备份文件的功能,这个功能需要实现:1.搜索指定的目录里是否存在当天的文件2.如果存在压缩并加密文件3.通过ftp上传到备份服务器4.在备份服务器上定时将文件拷贝到移动硬盘并定时清理文件 本来 ...

  2. 有关于并发中的死锁(Deadlock)、饥饿(Starvation)、活锁(Livelock)

    最近在看<实战Java高并发程序设计>,发现了之前没有接触过的几个名词. 死锁:之前在接触多线程的时候,接触过死锁的情况.死锁是线程中最糟糕的情况,如下面的图中的四辆车子一样,如果没有一辆 ...

  3. haproxy监控页面添加及参数简介(转)

    环境: [root@localhost 13:55:31 haproxy]# cat /etc/redhat-release CentOS release 6.8 (Final) [root@loca ...

  4. Java框架spring 学习笔记(三):Bean 的生命周期

    当一个 bean 被实例化时,它可能需要执行一些初始化使它转换成可用状态.当bean不再需要,并且从容器中移除时,需要做一些清除工作.为了定义安装和拆卸一个 bean,我们只要声明init-metho ...

  5. 了解一下SQL映射文件

    1:SQL映射文件 MyBatis真正强大之处就在于SQL映射语句,相对于强大的功能,SQL映射文件的配置非常简单,与JDBC相比减少了50%的代码.下面是关于SQL映射文件的几个顶级元素配置 map ...

  6. UnitZ Battlegrounds beta5 - Unity吃鸡类型游戏模版 源码 仿绝地求生

    Requires Unity 2018.2.6 or higher.The first battle royale game starter kit on Asset Store, all syste ...

  7. pwnable.kr-fd-witeup

    登录进远程电脑,看到flag,查看内容,权限不够失败咯,ls -la看看权限. 欧克,fd用户对flag只用可读权限,但是呢,看到fd用户对fd文件有s权限,它指设置使当前在执行阶段具有文件所有者的权 ...

  8. 47 【golang】mysql操作

    新做了个demo,可以简单了解下mysql的操作:https://github.com/helww/mylab/tree/master/go/mysql

  9. Codeforces Round #552 (Div. 3) F题

    题目网址:http://codeforces.com/contest/1154/problem/F 题目大意:给出n,m,k,n是物体的个数,m是优惠方式的种数,k是需要购买的物体个数, 然后给出n个 ...

  10. vue父子组件实现v-model

    话不多说,直接上代码 <div id="app"> <price-input v-bind:value="price" v-on:input= ...