Vue.js学习笔记—从安装Node.js、cnpm镜像、webpack打包工具、vue-cli脚手架到新建打开项目

Window 上安装Node.js

官网下载:https://nodejs.org/en/

根据选择下载

开始安装node.js

点击运行

 

安装成功!

版本测试

Cmd命令

检查是否配置环境!

输入:path

查看node版本

输入:node --version

查看npm版本

输入npm -v

二、安装cnpm镜像、webpack打包工具、vue-cli脚手架

什么是cnpm?

了解cnpm先了解npm

npm(node package manager)是nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等), NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,它是 Node 获得成功的重要原因之一

因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,所以感谢淘宝团队干了这事。来自官网:“这是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。简而言之就是使用cnpm加快下载安装速度!详情了解淘宝镜像:https://npm.taobao.org/

安装cnpm镜像

由于npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内镜像---cnpm

输入: npm install -g cnpm --registry=http://registry.npm.taobao.org

安装webpack打包工具

输入:npm install webpack -g

安装全局vue-cli脚手架

cnpm install vue-cli -g

过程会耗时十几秒,等跑完就可以了!

好了,到此说明整个环境就搭建好了,说明安装完成。

二、新建Vue项目

创建Vue工作目录

搭建完手脚架之后,我们开始建一个新项目,一般情况下!我们不建议把项目目录放在C盘,因为vue的文件比较大。

习惯会在其他盘,常见一个工作空间目录,易于管理!

如:我在E盘创建一个文件夹叫:Vue-WorkSpace     然后在当前目录下打开命令窗口!

两种方法进入命令台

手动键入方法:

键盘按Win+R; 输入cmd   跳出命令窗口:

然后改盘到工作目录,

输入:E:

再输入:cd E:/Vue-WorkSpace

Shift鼠标右键快捷方法:

进入Vue-WorkSpace目录!按住键盘Shift键(记住是按住),点击鼠标右键!

点击:在此处打开Powershell窗口

就会跳出命令窗口(这里是Win10的Windows PowerShell)

开始创建Vue项目

输入命令:vue init webpack my-first-project   

// my-first-project相当于项目文件夹可以自定义,是基于webpack的项目。

输入后回车!可以看下内存!前五个直接可以Yes,三个NO(这三个暂时NO,不然会提示很多警告),看图!

完成之后,在工作目录就有新建了一个文件夹

三、打开Vue项目

不管是接到新的Vue项目Demo,还是打开一个Vue项目,以下操作都是通用的!

进入项目文件夹

当Vue环境安装完后!需命令进入Vue项目文件夹(即my-first-project文件夹内)!

输入: cd my-first-project

回车进入新建的项目。

在项目里安装依赖

因为各个模板之间都是相互依赖的,所以现在我们要安装依赖,在项目目录下里输入以下命令。

输入:cnpm install

运行项目

一切环境依赖安装准备就绪,我们就可以打开测试一下自己新建的vue项目的运行情况,

输入:cnpm run dev  

直接回车。就可以在浏览器访问地址,默认为localhost:8080。

在浏览器输入localhost:8080,运行项目

直接在浏览器输入localhost:8080就可以打开默认的模板;如图:

到此为止,vue开发环境搭建完毕。

猜你喜欢

转载自www.cnblogs.com/Jo-liver/p/10842129.html