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

版权声明：本文为CSDN博主「NanQiao1716」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/NanQiao1716/article/details/104495173
重要的事要说三遍，比如我们搭建项目中的文件代表什么含义，##关注查看搭建项目生成文件的含义基于vue搭建项目和基于webpack搭建项目的含义##点击链接查看
1.首先我们要先进入nodejs官网下载nodejs程序包
—下载链接：官网链接
安装nodejs之前简单了解一下什么是nodejs点击查看

image.png

2.选择自己熟悉的磁盘，建议安装在除c盘之外的磁盘（便于管理，不易与本地系统文件混淆）
—在这里我选择安装的是D盘（D:\node）并在node文件下新建一个Nodejs文件又来存储nodejs程序）
3.配置nodejs的变量环境

1.粘贴复制你安装nodejs程序的文件夹
2.进入Windows系统
3.将粘贴的路径复制到path目录中

image.png

4.打开cmd命令行输入node -v查看nodejs版本号,输入npm -v 查看npm版本号
5.使用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 安装脚手架，用于生成项目

image.png

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 拉取旧版本

小博有上传软件你们可以点击下载链接下载
使用的软件是vistauo code
则需要安装插件：Vetur
5.安装完所有的依赖之后查看文件夹D:\node\Nodejs\node_modules@vue下有没有成功安装之前拉过的包文件夹，如下
cli安装的脚手架
cli-init脚手架初始化
cli-service-global脚手架快速开发原型项目
6.开始搭建我们的vue脚手架，##关注查看搭建项目生成文件的含义基于vue搭建项目和基于webpack搭建项目的含义##

第一步在node下新建一个文件夹

第二步在选中当前文件如何输入cmd，回车之后成功进入命令行工具

第三部成功进入命令行工具之后，输入 vue create vue-app(创建项目vue-app(项目名自己可以另取别名))

image.png

注意成功启动之后不能关闭窗口，只能最小化，不然在浏览器输入端口号找不到我们搭建的项目

第三步，在浏览器中输入localhost：8080

image.png

第四步查看我们的新建vue文件夹中有我们刚刚创建的项目则说明项目已经创建成功了

7.搭建完项目之后开始编辑我们的项目，这里我使用的软件为vs code 还需要安装插件Vetur 不然编写vue文件无法进行高亮

将我们搭建的项目拉入软件vs code编辑器，需要获取编辑器的点击链接//download.csdn.net/download/NanQiao1716/12191874

image.png

修改项目代码之后，浏览器展示

8.如果我们不小心关掉命令行窗口，导致项目无法在浏览器中展示
~~第一步找到我们创建项目的目录地址，如何在地址栏中输入cmd

~~第二步在命令行输入 npm run serve

~~第三步浏览器中打开命令行中提示的端口htpp://localhost:8080

9.重要的事要说三遍，比如我们搭建项目中的文件代表什么含义，##关注查看搭建项目生成文件的含义基于vue搭建项目和基于webpack搭建项目的含义##
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
重要的事要说三遍，比如我们搭建项目中的文件代表什么含义，##关注查看搭建项目生成文件的含义基于vue搭建项目和基于webpack搭建项目的含义##
————————————————
版权声明：本文为CSDN博主「NanQiao1716」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/NanQiao1716/article/details/104495173