创建Vue项目

Vue项目创建流程思想

思考: 我们是怎么在我们自己的电脑上开发java代码的?

1, 首先我们安装了jvm, 这个是我们java代码运行的环境
2, 之后我们安装idea, 这是一个帮我们构建以及管理java项目的工具
3, 紧接着我们在idea里new Project 创建一个javase项目
4, 之后我们在idea所创建的java项目中写java代码

那么对应的, 如果我们创建一个Vue项目,并且想写一些Vue代码也需要上述流程
1, 我们需要安装node , node是js的运行环境(node的本质是个浏览器)
这一步等价于我们java安装jvm
2, 我们需要安装cnpm, (node自带npm工具, 但是我们没法快速访问国外内容, 所以需要安装中国镜像访问工具)(npm 或者cnpm 类似我们java的包管理工具Maven )
3, 安装vue-cli , 这是一个Vue项目构建工具
这一步等价于我们java安装idea软件
4, 安装webpack, 这是一个包管理工具
这一步等价于我们写java代码时, 在idea里安装一些插件
5, 创建Vue项目
这一步等价于我们写java代码时, 用idea创建项目

vue语法、vue项目、前端服务器都是什么，有什么关系

Vue.js 是一种流行的 JavaScript 框架，用于构建 Web 应用程序的前端交互界面。Vue.js 使用 声明式渲染 、组件化开发和响应式数据绑定等特性来简化前端代码的编写，提高开发效率和代码可维护性。

对于 Vue 项目，它是一个使用 Vue.js 框架创建的 Web 应用程序，通常包含多个前端页面和各种可复用的 Vue 组件。为了实现 Vue 项目功能，需要在开发环境中运行一个本地前端服务器来提供 Web 页面服务，并与后端服务器进行数据交互。

前端服务器指的是运行在本地开发环境中的 Web 服务器，可以处理 HTTP 请求和响应，为 Vue.js 应用程序提供静态资源文件、API 接口、WebSocket 等服务支持。常见的前端服务器有 Node.js 中的 Express 和 Koa 等框架，以及 webpack-dev-server 等工具。这些前端服务器可以将开发过程中所涉及到的 HTTP 请求代理到后端服务器进行数据处理，从而方便前后端分离开发，并为应用程序在本地开发环境中提供方便的测试和部署。

因此，Vue 语法是用于编写 Vue.js 框架应用程序的语法规范；Vue 项目则是基于 Vue.js 框架构建的 Web 应用程序，前端服务器则是为 Vue 项目提供服务化支持的软件，它们之间有紧密联系，在 Vue.js 应用程序开发中起着非常重要的作用。
npm 和 webpack 是前端开发中常用的两个工具。

npm和webpack是什么

npm 是 Node.js 的包管理工具，可以帮助开发者在应用程序中安装、升级、删除和管理各种 JavaScript 包和依赖项。通过 npm 可以方便地下载各种流行的 JavaScript 库和框架，例如 Vue.js、React.js 等，并且它支持自动解决依赖关系，大大降低了开发工作的难度。

而 webpack 是一种模块打包工具，专门用于对前端资源进行打包处理。它能够将你的 CSS、JavaScript、图片和其他静态文件打包成一个或多个 Bundle，实现资源管理，模块化管理，代码分割，懒加载，优化等功能。webpack 可以将复杂的项目中的模块依赖拆分成一些小的包，并将它们优化和压缩，从而减少加载时间并提高性能。

因此，npm 和 webpack 都是前端开发中非常重要的工具。通过使用 npm ，开发者可以更轻松地管理和组织应用程序中的各种 JavaScript 库和框架，而通过使用 webpack ，开发者可以更加高效地管理浏览器端的资源请求和处理，从而提高应用程序的质量与性能。

具体步骤

2.1 安装node

根据电脑类型,在node官方网站下载node, 然后默认安装到计算机上
安装成功的标志如下, 打开计算机命令行 减产node版本 以及 npm版本

2.2 安装cnpm

因为创建一个Vue项目(并且在本地作为一个前端服务器运行起来 ), 需要很多第三方的包的支持(至少上百个包), 我们没有办法一个一个下载这些包(因为包需要 依赖另一个包, 并且依赖关系有版本要求), 所以我们前端就开发了一个工具叫npm, 这个工具的原理就是, 大家都把包存储到它的服务器上(有成千上万), 当我们需要的时候, 可以使用这个npm工具帮我们从它的服务器上下载正确的以及对应的包到我们本地,以供我们使用.
但是, 这个npm服务器在国外,(另外安装node自带npm下载工具, node集成了npm), 所以下载很慢.
我们就需要一个国内镜像那就是cnpm(阿里提供), 所以我们可以安装cnpm的下载工具, 在我们国内镜像上下载我们需要的包

安装方式:如下
在计算机命令行执行如下命令

npm install -g cnpm@6.0.0 --registry=https://registry.npm.taobao.org

安装成功的标志, 检查版本号

cnpm -v

2.3 安装Vue-cli

Vue-cli对于我们创建一个项目来说, 就像创建java项目我们需要安装一个idea一样

安装方式:如下
在计算机命令行执行如下命令(总共需要两个命令)

cnpm install -g @vue/cli
cnpm install -g @vue/cli-init

• 注意如果在执行这一步报错: 类似”UUID is not a function”的错误(或者其它错误), 一般是因为cnpm版本太高而和当前系统不兼容, 需要重新安装一个低版本稳定的cnpm覆盖(会自动覆盖的)已经安装的cnpm;
  
  
  

判断安装成功的标志:检查版本号

vue -V

2.4 安装webpack

安装命令如下:

cnpm install -g webpack

2.5 上述安装均属于基础配置

比如我们计算机如果安装了jvm 安装了idea 就不需要重复安装(除非idea或者jvm崩溃了)

2.6 创建项目

创建一个Vue项目, 就类似与通过idea创建一个se项目一样, 只不过我们创建项目是通过命令行的命令
创建项目的命令: (注意项目名建议全小写英文)

vue init webpack 项目名

• 注意, 创建项目一定要选好命令行路径
  比如, 我希望在桌面创建一个Vue项目, 就把命令行路径切换到桌面, 那么当项目创建完成, 这个项目就在桌面上

比如, 我希望在D盘MyProject目录下创建一个Vue项目, 就把命令行路径切换到D盘MyProject目录, 那么当项目创建完成, 这个项目就在D盘MyProject目录下

(注意, 就像我们可以通过idea反复创建一个se项目, 我们也可以通过vue init webpack 项目名 命令反复在不同地方创建项目, 但是如果创建了之后不想要了, 记得吧创建出来的项目删除)
参考视频
以上步骤, 默认回车, 让选择的y或者n 统一选n(输入n 回车)
注意最后一步, 上下键, 选最后一个, 回车, 项目目录构建已经完成

最后一步, 安装包（在这一步完成之前，一定不要用idea打开该项目）
根据命令提示，切换到项目所在文件夹中：cd 项目名
第二步注意使用

cnpm install

// ---------------项目创建完成--------------------

启动这个前端vue项目
命令

npm run dev

这也就意味着, 我在我的计算机里启动了一个Vue项目(是一个前端服务器) 端口在8080

关闭这个项目(停止) 命令ctrl + c, 已经关闭

//------------------注意-------------------------------

1，若前端的命令突然不能用了，配置环境变量：C:\Users\lenovo\AppData\Roaming\npm
2，在安装node modules之前，一定不要用idea打开该项目（idea会卡死，因为node modules太大了）

启动vue项目

在vue项目的文件夹下打开dos命令窗口
输入命令

npm run dev

浏览器输入URL访问

http://localhost:8080

关闭项目

Ctrl+c