1.首先我们要先进入nodejs官网下载nodejs程序包
—下载链接:https://nodejs.org/en/
2.选择自己熟悉的磁盘,建议安装在除c盘之外的磁盘(便于管理,不易与本地系统文件混淆)
—在这里我选择安装的是D盘(D:\node)并在node文件下新建一个Nodejs文件又来存储nodejs程序)
3.配置nodejs的变量环境
–1.粘贴复制你安装nodejs程序的文件夹
2.进入Windows系统
3.将粘贴的路径复制到path目录中
3.打开cmd命令行输入node -v查看nodejs版本号,输入npm -v 查看npm版本号
4.使用npm进行拉包,用于搭建vue脚手架便于项目开发
1.node > 8.9 Node版本必须要大于8.9,不然创建搭建vue项目会出现不可描述的意思
2.如果之前已经安装过旧版本(非3.x)脚手架,需先卸载旧版本:
3.npm uninstall vue-cli -g 卸载旧版本
4.npm install -g@vue/cli 安装脚手架,用于生成项目
5.npm install -g@vue/cli-service-global 快速原型开发 编译.vue文件(常用与开发大型项目)
查看vue-cli 版本: vue --version或Vue -V
后面的步骤跟之前拉取npm install -g@vue/cli 和npm install -g@vue/cli-service-global的过程一样的,小博就不叙述了,复制粘贴代码执行就OK
如果仍然需要使用旧版本的vue init功能,可以全局安装一个桥接工具:
npm install -g @vue/cli-init 拉取旧版本
小博有上传软件你们可以复制链接下载//download.csdn.net/download/NanQiao1716/12191874
使用的软件是vistauo code
则需要安装插件:Vetur
5.安装完所有的依赖之后查看文件夹D:\node\Nodejs\node_modules@vue下有没有成功安装之前拉过的包文件夹
cli安装的脚手架
cli-init脚手架初始化
cli-service-global脚手架快速开发原型项目
6.开始搭建我们的vue脚手架
##第一步在node下新建一个文件夹
##第二步在选中当前文件如何输入cmd,回车之后成功进入命令行工具
##第三部成功进入命令行工具之后,输入 vue create vue-app(创建项目vue-app(项目名自己可以另取别名))
注意成功启动之后不能关闭窗口,只能最小化,不然在浏览器输入端口号找不到我们搭建的项目
##第三步,在浏览器中输入localhost:8080
##第四步查看我们的新建vue文件夹中有我们刚刚创建的项目则说明项目已经创建成功了
7.搭建完项目之后开始编辑我们的项目,这里我使用的软件为vs code 还需要安装插件Vetur 不然编写vue文件无法进行高亮
##将我们搭建的项目拉入软件vs code编辑器,需要获取编辑器的点击链接//download.csdn.net/download/NanQiao1716/12191874
##修改项目代码之后,浏览器展示
8.如果我们不小心关掉命令行窗口,导致项目无法在浏览器中展示
~~第一步找到我们创建项目的目录地址,如何在地址栏中输入cmd
~~第二步在命令行输入 npm run serve
~~第三步浏览器中打开命令行中提示的端口htpp://localhost:8080
9.最后重要的小博要说,比如我们搭建项目中的文件代表什么含义,这些我统一会整理在我的资源区,注意查看我的上传资源区
10.Vue一些常用命令:
1.安装vue-cli
npm install -g@vue/cli
npm install -g@vue/cli-service-global
2.创建一个基于 webpack 模板的新项目(上面叙述是基于vue模板的)//步骤与上面的步骤一样,不过运行命令有点不一样了,这里小博简单示范一下。
执行命令 : vue init webpack 项目名称
~~运行npm run dev (窗口不小心关掉了查看##第8模块##步骤一样)找到文件所在,直接输入cmd回车进入命令行工具之后在输入npm run dev,而第8点重新启动基于vue项目的执行命令为nmp run serve
~~在浏览器中复制粘贴端口号
- 安装需要开发依赖:
利用bower 拉需要的包
包管理工具,bower拉前端需要的依赖包 ,npm 拉后端需要的依赖包
npm install bower - g将bower全局安装
4.项目运行:
npm run dev
5.安装vue-resource插件(通过XMLHttpRequest或JSONP发起请求并处理响应 //get post请求):
npm install vue-resource --save
6.安装路由插件:
npm install vue-router --save
7.安装element-ui:
npm i element-ui -S
(安装好之后要记得在main.js中引入)
8.安装axios
npm install axios --save
9.安装Echarts
npm install echarts --save
10.如果想要终止终端(cmd)正在运行的命令,则ctrl +c