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项目详解

Vue