如何使用vue搭建脚手架,nodejs如何进行拉包处理,简述如何基于webpack创建项目模板

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
在这里插入图片描述
~~在浏览器中复制粘贴端口号
在这里插入图片描述

  1. 安装需要开发依赖:
    利用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
发布了8 篇原创文章 · 获赞 0 · 访问量 1669

猜你喜欢

转载自blog.csdn.net/NanQiao1716/article/details/104495173