浅入深出Vue:环境搭建
浅入深出Vue:环境搭建
工欲善其事必先利其器,该搭建我们的环境了。
安装NPM
所有工具的下载地址都可以在导航篇中找到,这里我们下载的是最新版本的
NodeJS Windows安装程序
下载下来后,直接Next
这里同样的,有固态硬盘的童鞋可以安装到固态硬盘,不过这里有个小问题就是
在选择目录的时候会卡死一小会儿。可能是若羽的机器性能不太好。
接下来一路下一步即可,坐等安装
安装完成,让我们命令行测测看
win键 + R
呼出运行,输入cmd
确定即可
输入node -v
,查看nodejs
的版本。若羽这里装的是v10.15.0
输入npm -v
,查看npm
的版本。若羽这里是6.4.1
切换国内镜像源
npm
默认是国外的源,对国内的用户不太友好,安装各种库速度很慢。
因此我们尽可能选择国内的源减少网络问题,这里若羽选择的是淘宝 npm镜像
。同样的,在导航篇中都有地址噢。
这里我们输入官方提供的命令(注:在官方地址中的使用说明
处给出了这条命令,这里为了方便,若羽复制了过来)
npm install -g cnpm --registry=https://registry.npm.taobao.org
好的,安装完成
安装webpack
接下来让我们安装webpack
输入下面的命令,我们进行全局的webpack
安装
cnpm install -g webpack
安装完成
接下来我们安装 webpack-dev-server
cnpm install -g webpack-dev-server
安装完成
因为我们这里没有安装webpack-cli
,因此我们暂时没办法用webpack -v
去查看
我们所安装的webpack
版本。
安装vue-cli
好的,接下来终于到了正主儿了。
全局安装vue-cli
cnpm install -g vue-cli
安装完成
用vue -V
来查看一下安装的vue
版本,这里若羽安装的版本是2.9.6
新建项目
前置工具,环境都已经准备完毕了。是时候开始新建一个项目了。
先切换到我们指定的目录下去, windows
下也可以用cd 目标目录
进行切换噢。
切换盘符是盘符:
,比如切换到D盘
的命令:
D:
还有另一个办法,就是对着目标目录的空白处。按住左 Shift
的同时,按下鼠标右键
。
弹出的菜单中会有一个在此处打开Powershell窗口
的选项,选择此选择即可直接在命令行中进入当前目录。
这里我们用vue-cli
来建立我们的第一个项目
vue init webpack blog
上述命令中, blog
表示的是我们新建项目的名称。这行命令应该这么说
vue init webpack 你要新建的项目名
基本上不用考虑选什么的问题,直接默认即可(咱们现阶段的目的是快速搭建)。
默认中包含了vue-router
和eslint
的选项,正好避免我们再去手动装一下的步骤了。
这里提一下两个地方,第一个是下图中Pick a test runner
。
这里若羽选择的是none
,因为我们的项目还没考虑写测试哈,所以若羽就顺手给干掉了。
需要的时候我们再加进来。
另一个就是这里,选择的是user NPM
。 昂,不过这个选项是默认的。可以不用在意
好了。开始初始化~
安装完成
运行项目
我们的第一个项目已经创建完成了,我们先让它跑起来看看~
项目运行两部曲:
先install
一下,虽然大多数情况下可以不需要。我们这里就勤快一下,也作为演示的一部分
cnpm install
在开发环境下运行,编译完后会显示这个页面。就表示已经编译完成了。
cnpm run dev
在浏览器中输入地址,即可开箱食用我们的第一个项目了~
localhost:8080
跟着若羽一步一步,跑起来自己的项目,不用担心若羽会漏掉什么。
从工具到环境,都不会落下的。
请放心食用~ :)
转载于:https://www.cnblogs.com/By-ruoyu/p/10260451.html
浅入深出Vue:环境搭建相关推荐
- 浅入深出Vue:发布项目
项目完成之后,当然不能满足于在我们的开发环境下跑一跑.我们可以打包发布到服务器上,让大家一起来欣赏一下你的作品. 那么 vue 项目如何打包发布呢,新建的项目目录下通常都有一个 README.md 的 ...
- 浅入深出Vue:子组件与数据传递
上一篇了解了组件的概念及在使用中需要注意的地方.在面对单个组件逻辑复杂需要拆分时,难免会遇到父子组件之间数据传递的问题.那么我们来了解一下在父子组件之间进行数据传递时需要遵循哪些约定,以及要注意哪些问 ...
- 浅入深出Vue:事件处理
上一篇的最后留下了一个 v-on的思考,也就是本章的主题:事件处理 为什么需要事件处理 在前端开发中,经常要面对各种表单.按钮.而这里面就住着一个事件:点击 (click). 前端童鞋们肯定不陌生它, ...
- 浅入深出Vue:文章编辑
登录与注册功能都已经实现,现在是时候来开发文章编辑功能了. 这里咱们就使用 markdown 作为编辑语言吧,简洁通用.那么我们就需要找一下 markdown 的编辑器组件了,而且还要支持 vue噢. ...
- 浅入深出Vue:注册
基本布局已经有了, 现在我们来开始做我们的注册页面~ 当然需要注册才能发表文章啊(糟老头子坏得很, 我可以只有我一个人能发啊). 这里我们设定只有注册才能发表文章,也就淡化了管理员这个概念.在开发中先 ...
- Java 注解 (Annotation)浅入深出
Java 注解 (Annotation)浅入深出 本文主要参考与借鉴frank909 文章,但更为简单,详细. Annotation 中文译过来就是注解.标释的意思.Annotation是一种应用于类 ...
- 浅入深出之Java集合框架(上)
Java中的集合框架(上) 由于Java中的集合框架的内容比较多,在这里分为三个部分介绍Java的集合框架,内容是从浅到深,如果已经有java基础的小伙伴可以直接跳到浅入深出之Java集合框架(下). ...
- 浅入深出之Java集合框架(中)
Java中的集合框架(中) 由于Java中的集合框架的内容比较多,在这里分为三个部分介绍Java的集合框架,内容是从浅到深,如果已经有java基础的小伙伴可以直接跳到浅入深出之Java集合框架(下). ...
- Angular浅入深出系列 - 写在前面
本系列目录: 写在前面 基础知识 控制器(Controller) 作用域(Scope) 集合(Collection) 模块(Module) 依赖注入(Dependency Injection) 服务( ...
最新文章
- spring注入----反射模式
- 通过 ViewState 保存 Self-Tracking Entities
- 双NameNode的同步机制
- ux设计中的各种地图_移动应用程序设计中的常见UX错误
- 一文弄懂Numpy中ndarray的维度(dimension)/轴数(axis/axes)问题
- 微信小程序后端Java接口开发
- c语言程序设计立体化教程,C语言程序设计立体化教程
- 超能竞速大开眼界,iQOO 5系列正式发布
- 功能测试用例设计方法,一文带你了解用例设计,再也不担心用例了
- 银联携手酷客多协助百万商家上线小程序
- js将数组对象中属性值相同的对象合并成一个children
- 24小时 java_Java获取24小时制的时间方法
- 初学微信云开发,云函数实现两数相加
- 面试:对封装、继承、多态的理解。
- MYSQL JDBC图书管理系统
- 玩qq游戏提示计算机内存不足,为什么电脑运行游戏后提示内存不足
- C++调用tinyxml2读写xml
- 使用 Python 构建图片搜索引擎
- 【存储】 iSCSI Target(tgt) |什么是iSCSI target|SCSI协议
- 很遗憾,你们的问题我无法回答--Leo谈应届生求职 10
热门文章
- vc6.0 debug 比 release 快??_快速入门快应用——quickapp构建与发布
- 服务器报告它来自digest_2020年全球服务器市场规模及竞争格局分析
- Makefile模板的改进
- 【kafka】多图解Kafka中的数据采集和统计机制
- 【Flink】Flink 源码阅读笔记(18)- Flink SQL 中的流和动态表
- 【clickhouse】Too many parts . Merges are processing significantly slower than inserts
- Netty实战项目:Spring boot 程序的聊天程序
- 20-10-023-安装-KyLin-2.5.2-单机版安装(MAC)成功
- 一次kafka的offset回退事件及相关知识点
- mac vim 无颜色 增加颜色