vue.js的安装

公司要开始分配给我作先后端分离项目了555555555555

 

 

让我一个java的去了解vue而且还要会搭建=-=

莫得办法那么就开始必不可少的安装环节吧：

第一步！

安装node.js：

首先进入官网node.js 附上官网url：https://nodejs.org/en/

 

 

按照箭头 选择下载windows64位的，而后等待下载完成

第二步： 

装完以后，咱们经过打开命令行工具（win+R）,输入 node -v 命令

此命令是查看node.js版本：

 

 

 看看版本号对不对应！若是是相应的版本号说明安装成功。

npm包管理器，是集成在node中的，因此安装了node也就有了npm,输入 npm -v ，显示npm的版本信息：

 

 

 到了这一步，node的环境已经安装完成

第三步：

安装cnpm

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

而后等待，没报错表示安装成功，如图！

 

 第四步：

安装vue-cli 脚手架构建工具

输入：npm install -g vue-cli ，而后等待安装完成

 

 

经过以上三部，咱们须要准备的环境和工具都ok了，如今就要开始使用vue-cli来构建项目

第五步：

 要选择存放项目的位置，我选择在c盘下建立新的目录：NodeTest 

 

 

 

 必定要手动建立！！！！！

 

 

 

 

 

 

 

就像我这样！！！用cd 将目录切到该目录下

在NodeTest 目录下，运行命令 vue init webpack firstApp

而后按照我这样写：

 

 

 项目名称、项目描述、做者信息，对于有些不明白或者不想填的信息能够一直按回车去填写就行了

中间会等待，让程序本身下载吧，会有不少的东西出来不用管！以后会显示成功：

 

 

 

 第六步：

 如今咱们去NoteTest目录下去看是否已建立文件：

 

 

 

打开firstApp，目录以下：

介绍一下目录及其做用：

build：最终发布的代码的存放位置。

config：配置路径、端口号等一些信息

node_modules：npm 加载的项目依赖模块。

src：这里是咱们开发的主要目录，基本上要作的事情都在这个目录里面，里面包含了几个目录及文件：

assets:放置一些图片，如logo等

components:目录里放的是一个组件文件，能够不用。

App.vue：项目入口文件，咱们也能够将组件写这里，而不使用components目录。

main.js ：项目的核心文件

static：静态资源目录，如图片

test：初始测试目录，可删除

.XXXX文件：配置文件。

index.html：首页入口文件

package.json：项目配置文件。

README.md：项目的说明文件。

 

第七步：

主要在src目录中作修改。这个项目如今还只是一个结构框架，整个项目须要的依赖资源都尚未安装。

安装项目所须要的依赖：控制台执行 cnpm install 

这时候能够用cnpm来代替npm了

 

 

 

 

 

 

 

 安装完成以后，咱们到本身的项目中去看看，这时候会多一个node_modules文件夹，这里面就是咱们所须要的依赖包资源。

 

 第八步：

运行项目！

控制台输入 npm run dev ，会用热加载的方式运行咱们的应用，

热加载可让咱们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果：

 

 第九步：

 项目启动后，在浏览器中输入项目启动后的地址：http://localhost:8081/#/

 

 第十步！

整个项目就完成啦！来看看效果：

 

 

至此，vue的安装就结束啦！供你们参考哦~

一如软件深似海 既然选择了就努力的学下去 这个年纪不拼一下谁知道将来会是什么样子捏

若是工做不忙的话以后写一写spring的笔记吧 这但是每一个java开发工程师必须学的一个东西~

 

 加油！为了高薪！咱们还年轻！