Vue项目详解

Vue项目详解

焦虑烧麦 208 2022-05-07

Node.js介绍

​ Node.js 是一个基于Chrome V8引擎的Javascript运行环境。Node.js使用了一个事件驱动非阻塞式I/O的模型,即轻量又高效。另外,Node.js可以理解为Javascript运行时环境 ( runtime ),runtime 类似于国际会议中的同声翻译。

验证是否按照成功

具体安装步骤请参考:Nodejs安装及环境配置

​ 安装完Node.js后,在cmd命令提示符窗口下,输入以下指令可以得到版本信息:

node -v

出现以下画面则安装成功
image-1652176373912

什么是NPM

NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:

  • 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
  • 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
  • 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

验证是否安装成功

由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了。同样可以通过输入 “npm -v” 来测试是否成功安装。命令如下,出现版本提示表示安装成功:

image-1652176396446

NPM常用命令

命令 注释
npm install -g 安装模块 加不加 “-g” 代表是否全局安装
npm list 查看某个模块的版本号
npm uninstall 卸载模块
npm update 更新模块

注意

全局安装和非全局安装的区别:

比如,使用 ‘npm install express -g’ 安装express框架后,就可以在计算机的任意位置打开命令提示符,直接使用express创建项目,否则会遇到 “express不是内部或外部命令,也不是可运行的程序” 的错误。

使用 'npm install express’框架为局部安装,就是将模块下载到当前命令行所在的目录下,只有当前目录可用

CNPM

CNPM 是中国 npm 镜像的客户端

安装:npm install cnpm -g

国内安装 China mirror: npm install cnpm -g --registry=https://registry.npm.taobao.org

输入 cnpm -v 查看版本信息
image-1652176414216

Vue-cli脚手架

Vue-cli 是一个官方命令行工具,可用于快速搭建大型单页面应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程,只需几分钟即可创建并启动一个 带热重载、保存时静态检查,以及可用于生产环境构建配置的项目。

安装

cnpm install vue-cli -g

使用:vue -V(注意是大写V)验证是否安装成功,成功则会显示Vue-cli的版本号

单页面应用(SPA)

单页面应用(Single Page Web Application),只有一个Web页面的应用,是一种从Web服务器加载的富客户端,单页面跳转仅刷新局部资源,公共资源(js,css等)仅需加载一次

多页面应用(MPA)

多页面应用(Multi-Page Application),多页面跳转刷新所有资源,每个公共资源(js,css等)需选择性重新加载。

单页面和多页面应用对比

单页面应用 多页面应用
组成 一个壳页面和多个页面片段 多个完整页面
公共资源(css,js) 共用,只需在外壳部分加载 不共用,每个页面都要加载
刷新方式 页面局部刷新或更改 整页刷新
url模式 a.com/#/pageone
a.com/#/pagetwo
a.com/pageone.html
a.com/pagetwo.html
用户体验 页面片段间的切换块,用户体验良好 页面切换加载缓慢,流畅度不够,体验差
搜索引擎优化 需要单独方案,实现较困难,不利于SEO检索 可利用服务器端渲染(SSR)优化,实现方法简易
开发成本 较高,常需借助专业框架 较低,单页面重复代码多
维护成本 相对容易 相对复杂

image-1652176433606

全局安装webpack

cnpm install webpack -g

创建项目

也可以参照这篇文章:使用Visual Studio Code搭建第一个Vue项目

创建项目的命令:vue init webpack <项目名称>

例如:vue init webpack dm

创建之后会有一些命令行交互,在这里可用初始化一些项目信息,具体如下👇:
image-1652176449778

命令交互的含义

  1. Project name: 如果输入新的项目名称,则会使用新输入的项目名称;直接回车的话,就会默认使用webpack后面跟的项目名称。
  2. Project description: 项目的描述内容,可用自定义一些内容。
  3. Author: 作者,可用写自己的邮箱或Github地址
  4. Vue build: 打包的方式,这里直接回车即可
  5. Install vue-router: 是否安装Vue路由,建议选择Yes,一般项目都需要路由功能
  6. Use ESLint to lint your code: 是否启用ESlint检测,这里选择不启用
  7. Set unit tests: 是否需要单元检测,建议选择不需要
  8. Setup e2e tests with Nightwatch: 是否需要端对端的检测,建议选择不需要
  9. Should we run ‘npm install’ for you after the project has been created?(recommended):项目创建后是否要为你运行“npm install”? 这里有三个选项
    1. yes,use npm(使用npm)
    2. yes,use yarn(使用yarn)
    3. no,I will handle that myself(自己配置安装包)

创建好的项目是下面这样的:

image-1652176471521

经过上面的步骤,项目基本的模板框架已经搭建起来了,下面安装项目的依赖模块并启动项目。首次进入项目目录中,使用

cd dm 接下来安装项目依赖模块,运行命令 cnpm install 安装好后会多出一个node_modules文件夹。如果已经有了就不必重复安装了。

目录结构详解

  • src:放置组件和入口文件
  • static:放置静态资源文件
  • index.html:为文件入口

详细的目录结构图:

  • build(项目构建(webpack)相关代码)
    • build.js(生产环境构建代码)
    • check-version.js(检查node,npm等版本)
    • utils.js(构建工具相关)
    • webpack.base.conf.js(webpack基础配置)
    • webpack.dev.conf.js(webpack开发环境配置)
    • webpack.prod.conf.js(webpack生产环境配置)
    • vue-loader.conf.js(loader的配置文件)
  • config(构建配置目录)
    • dev.env.js(开发环境配置)
    • index.js(项目的一些配置变量)
    • prod.env.js(生产环境变量)
  • node_modules(依赖的node工具包目录)
  • src(源码目录)
    • assets(资源目录)
    • components(组件目录)
    • router(路由配置目录)
    • App.vue(页面级Vue组件)
    • main.js(页面入口JS文件)
  • static(静态文件目录,一些图片,Json数据等)
  • index.html(入口文件)
  • package.json(项目描述文件)
  • .editorconfig(ES语法检查配置)
  • .babelrc(ES6语法编译配置)
  • .gitignore(Git上传需要忽略的文件格式)
  • README.md(项目说明)

启动项目

启动项目命令: npm run dev

image-1652176483648

启动后在浏览器url栏处输入:http://localhost:8080

项目启动成功后出现如下画面:

image-1652176492777

以上就是Vue项目详解