vue的安装和使用

1 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创建项目

2 具体步骤

2.1 安装node

根据电脑类型,在node官方网站下载node, 然后默认安装到计算机上

安装成功的标志如下, 打开计算机命令行 检查node版本 以及 npm版本

2.2 安装cnpm

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

安装方式:如下
在计算机命令行执行如下命令
npm install -g cnpm --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

判断安装成功的标志:检查版本号
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目录下

2.6.1 在桌面创建项目

(注意, 就像我们可以通过idea反复创建一个se项目, 我们也可以通过vue init webpack 项目名 命令反复在不同地方创建项目, 但是如果创建了之后不想要了, 记得把创建出来的项目删除)

创建过程默认回车, 让选择的y或者n 统一选n(输入n 回车)，然后选择I will Handel it myself的选项自己装包

注意最后一步, 上下键, 选最后一个, 回车, 项目目录构建已经完成

最后一步, 安装包(因为之前选择了自己来安装包)
进入所创建vue文件夹目录，然后使用 cnpm install

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

启动这个前端vue项目
命令 npm run dev

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

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

注意：
如果要更改项目目录，或者将项目拷贝给别人，不要把包一并拷贝，因为包的文件很多，会造成很多内存的碎片无法回收，你只需要将包之外的东西拷贝给别人，然后重新cnpm install