目录
前言
本学期我们进行了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项目的创建介绍。文章供个人复习用,如有错误,欢迎指出。