从零开始搭建一个VUE3.0项目之基础搭建(一)

从零开始搭建一个VUE3.0项目之基础搭建(一)_第1张图片

最近在整理之前的笔记,现在回头来看,发现之前写的一些VUE相关笔记还是比较粗糙的,特此梳理一遍,所以就有了这一篇文章。

1 安装nodejs

什么是node.js?

简单的说 Node.js 就是运行在服务端的 JavaScript

Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台

直接在官网下载对应版本安装即可 官网下载地址:http://nodejs.cn/download/

PS: 推荐下载LTS版本的

安装完毕后可以在控制台通过命令:npm -v 查看版本

2 安装vue-cli 开发脚手架

什么是vue-cli? 官方网站地址:https://cli.vuejs.org/zh/guide/

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:

  • 通过@vue/cli 实现的交互式的项目脚手架。
  • 通过@vue/cli +@vue/cli-service-global 实现的零配置原型开发。
  • 一个运行时依赖 (@vue/cli-service),该依赖:
    • 可升级;
    • 基于 webpack 构建,并带有合理的默认配置;
    • 可以通过项目内的配置文件进行配置;
    • 可以通过插件进行扩展。
  • 一个丰富的官方插件集合,集成了前端生态中最好的工具。
  • 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

在控制台里面输入:npm install -g @vue/cli 全局安装即可。

在控制台通过命令:vue --version 可以查看安装后的版本。

在控制台通过命令:npm uninstall -g @vue/cli 可以卸载安装的@vue/cli版本。

在控制台通过命令:npm update -g @vue/cli 可以升级安装的@vue/cli版本。

PS: vue3.0需要的@vue/cli版本要大于4.5。

3 创建一个vue3.0项目并运行

在目录: d://workspase (可以切换成其他目录)下进入cmd界面 输入: vue create webtest(项目目录名称)

这个时候会弹出各种选项让你进行选择,专业前端或者公司要求的,自行按照要求或者习惯选择即可。

初学或者基础一般的话直接选择Default(vue3) 这个选项即可,然后会看见控制台疯狂输出。最后

cd webtest
  npm run dev

按照操作运行即可。最后会弹出项目运行地址,通常是:http://localhost:8080/#/ 进入地址就可以看见界面了。就表示成功创建一个一个vue3.0的项目了。

最后生成的项目结构大致是这样的:

从零开始搭建一个VUE3.0项目之基础搭建(一)_第2张图片

PS: 你真的了解package.json吗?来看看吧,这可能是最全的package解析 这篇文章详细说明了package.json。

PS: 项目搭建后可以在package.json当中查看vue以及core-js版本,建议使用以下命令升级到最新稳定版本

npm install core-js -s

npm install vue@next -s

4 引入vuex

什么是vuex? 简单来说就是一个前端全局数据存储变化管理插件, 官方网站地址:https://next.vuex.vuejs.org/zh/

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window),提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

在控制台通过命令:npm install vuex@next --save 安装即可

5 引入vue-router路由

什么是vue-router? 简单来说就是前端界面之间相关跳转的管理,官方地址:https://next.router.vuejs.org/zh/introduction.html

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举。功能包括:

  • 嵌套路由映射
  • 动态路由选择
  • 模块化、基于组件的路由配置
  • 路由参数、查询、通配符
  • 展示由 Vue.js 的过渡系统提供的过渡效果
  • 细致的导航控制
  • 自动激活 CSS 类的链接
  • HTML5 history 模式或 hash 模式
  • 可定制的滚动行为
  • URL 的正确编码

直接在项目命令行当在输入:npm install vue-router@4 -s 即可

6 引入axios

什么是axios? 官方网站: https://www.axios-http.cn/

Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

特性

  • 从浏览器创建XMLHttpRequests
  • 从 node.js 创建http 请求
  • 支持Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防御XSRF

直接在项目命令行输入:npm install axios 即可。

PS: 也可以选择封装好的vue-axios

7 引入前端框架

当上述的操作完成之后,接下来就是在项目上进行业务开发了,在进行业务开发的时候,会选择一些前端UI框架,这个时候就需要引入前端框架了。每个前端框架基本上官网都有引入方式,这里记录下一些支持VUE3.0的前端框架地址,按需选择即可。

  • Element Plus
  • Ant Design Vue
  • Naive UI

你可能感兴趣的:(前端技术,学习日志,vue.js,webpack,npm)