关于vue.js的项目化(个人学习用)

目录

前言

快速搭建一个vue项目

        1、下载安装node,首先要下载node并进行配置安装。

2、vue cli 脚手架的安装

3、开始项目的创建。

        4.项目结构介绍：

---

前言

        本学期我们进行了vue.js前端框架的相关学习，随着互联网技术的爆发，越来越多的前端开发技术如雨后春笋般出现，在众多的 JavaScript 前端框架中，Vue.is 无疑是最出色的(曾经一项针对 JavaScript 的调查表明，Vue.is 有着 89%的开发者满意度)。相比其他前端框架，如 Angular 和 React，Vue.is 框架在实现上更容易，程序员上手更快。使用 Vue.is 技术不仅提高了开发的效率，也改善了开发的体验，因此，熟练掌握Vue.is 前端框架已经成为 Web 前端开发工程师的必备技能。

        而关于Vue.js，Vue.js市面上非常流行的开源JavaScript框架，用于构建用户界面和单页面应用程序。它由尤雨溪于2014年创建，并由一个活跃的社区支持和维护。Vue.js的核心库只关注视图层，易于集成到其他项目中。它也可以与现有的项目一起使用，因为它可以逐步采用。

        Vue.js的主要特点包括响应式数据绑定、组件化开发、虚拟DOM、路由管理、状态管理等。它还提供了简单易用的API和文档，使得开发人员可以快速上手并构建高效的应用程序。

        由于Vue.js具有灵活性和可扩展性，它被广泛应用于各种规模的项目中。许多公司和开发人员选择Vue.js作为他们的首选前端框架，因为它提供了一种简单、直观且高效的方式来构建现代化的用户界面。Vue.js也在不断发展和改进，因此它被认为是一个非常有前景的前端框架。

        这里是vue.js框架的官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

        vue目前已经更新到vue3，并且还在不断更新维护。vue对于新手来说简单易上手，由于是基于标准HTML、CSS 和 JavaScript 构建的框架，所以学习起来不会有很大的冲突感。并且在官方文档中也有循序渐进的学习教学。

        接下来，我将为大家介绍如何快速搭建一个vue项目并向大家介绍里面的结构。

=========================================================================

快速搭建一个vue项目

        vue项目，也就是vue的项目化，首先第一步我们要进行vue脚手架的环境配置。

        1、下载安装node,首先要下载node并进行配置安装。

       这里是node官网的下载地址： 下载 | Node.js 中文网 (nodejs.cn)

        下载好node后进行一步步的安装，然后在系统高级设置中配置环境变量：

        

        

双击Path，进入环境配置后把node的路径复制粘贴进去。

        路径最好不要有中文，这里是马虎大意了，又懒得更换文件地址。

        最后win+r呼出控制台输入node-v指令查看是否安装成功：

        显示版本号，安装成功。

        

        需要注意的是，我们在成功安装node后也会自动安装成功npm。

        

        npm（Node.js Package Manager）是一个Node.js的包管理工具，用来解决Node.js代码部署问题，只要电脑成功安装了node，npm也会自动安装在电脑上。

npm使用场景需求：

        1、从npm服务器下载别人编写的第三方包到本地使用。

        2、从npm服务器下载并安装别人编写的命令程序到本地使用。

        3、将自己编写的包或命令行程序上传到npm服务器供别人使用。

npm常用命令行：

           npm install：安装项目所需要的全部依赖包，需要配置package.json文件。

           npm uninstall：卸载指定名称的包。

           npm install 包名：安装指定名称的包。

           npm update：更新指定名称的包。

           npm run serve：项目启动。

           npm run build：项目构建。

           npm config get registry  ：查看当前npm下载包使用的是哪一个源。

           cmd命令行输入指令安装淘宝镜像:

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

2、vue cli 脚手架的安装

//  通过npm全局安装@vue/cli脚手架  @3.10表示下载某个指定版本，如果不写，则下载最新版本

           npm install -g @vue/cli

           PS:如果使用npm方式安装脚手架速度太慢，或者是卡死的话，可以选择淘宝镜像cnpm的方式安装

          //安装淘宝镜像的命令行

          ①  npm install -g cnpm --registry=https://registry.npmmirror.com

          // 如果安装了cnpm淘宝镜像的话，可使用下面的命令行安装@vue/cli脚手架，网速会相对来说快一些

          ②  cnpm install -g @vue/cli

         //PS：如需要卸载vue/cli包，可执行以下命令行

         npm uninstall -g @vue/cli

成功安装界面：

输入vue -V指令，如果出现版本号说明安装成功。

3、开始项目的创建。

        我们可以使用vue crate+项目名的方式创建vue项目。

        例如：vue create helloworld

        执行 vue create 命令之后，可看到如下所示界面：

        在这个步骤中，可以使用键盘的↑和↓方向键选择创建项目的方式，default是默认选择项，表示使用默认的方式创建项目；Manually select features选项表示使用手动配置方式创建项目，在这里，我们选择手动的方式创建，手动配置界面如下图所示：

        此界面中，可以使用键盘的↑和↓方向键选择创建项目的方式，按住空格键选择某一项，再次按住空格键，取消选择，每个配置项的作用如下表所示：

        大家根据需求选择相应的配置项，一步步往后创建项目即可。项目创建成功之后，根据界面提示，可以执行如下两个命令行，进入项目目录，启动项目：

cd helloword  //进入项目目录

npm run serve   //启动项目

        项目已经启动成功，根据项目启动的地址，我们在浏览器输入http://localhost:8080/ 。

        出现以下页面：

        

        我们的Vue项目就创建好了。

        4.项目结构介绍：

        进入VSCode编译器能更直观的查看项目的文件结构：

        

以上就是关于Vue项目的创建介绍。文章供个人复习用，如有错误，欢迎指出。