一、环境检查

1.安装node环境

Node.js发布于2009年5月,由Ryan Dahl开发,是一个基于Chrome V8引擎的JavaScript运行环境,使用了一个事件驱动、非阻塞式I/O模型,让JavaScript 运行在服务端的开发平台,它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。这里就不过多介绍了大家可以去官网下载并安装;传送门安装完node之后接着往下看。
在这里插入图片描述
在这里要说明几点:

  • vue的开发本身是不依赖node的,不过vue的脚手架工具vue-cli里面集成的webpack是基于node开发出来的。
    因此只能说webpack是依赖node的。

  • npm就好比是一个前端的插件商店,里面有各种开发者写的包,你需要的时候就从命令行安装就可以了,类似与linux的apt的概念

  • grunt,gulp,webpack这些只是工具,帮助我们前端完成复杂的开发,提高效率。你完全可以不用,如果不会的话还强行用只会加慢你的开发效率,而违背了初衷。

  • node是一个环境配置文件,当配置node的时候npm也附带在node上。webpack是一个包管理工具,他可以将vue.js进行打包或解析

2.脚手架配置

在了解完上述几点之后可以按照步骤往下安装了:

1.安装完nodejs后查看node版本(确保有node环境)

node -v

在这里插入图片描述
2.设置淘宝镜像加速

npm config set registry https://registry.npm.taobao.org/

3.下载vue

npm install vue

4.安装vue脚手架
一般是全局安装,-g是全局安装,指安装到global全局目录去

npm install  -g  @vue-cli@版本号

环境配置好了接下来就创建一个vue项目

3.不同版本vue介绍

目前vue有vue2与vue3两个版本,虽然vue2目前是主流但不乏将要被vue取代的趋势
引入vue文件时有两种包,一个是vue.js另一个是vue.runtime.xxx.js,这两种包区别如下:

  • vue.js是完整版的Vue,包含:核心功能 + 模板解析器。
  • vue.runtime.xxx.js是运行版的Vue,只包含:核心功能;没有模板解析器。

二、创建项目

首先进入到我们想要创建项目的目录下并打开命令行。然后依次执行下列命令

vue create 项目名称

我这里的名称是vue-echarts
请添加图片描述
这里选择默认就好
请添加图片描述
因为我这里有一个vue-echarts文件夹(但是是空的),所以就选择覆盖了
请添加图片描述
然后静静等待创建成功。
创建成功之后cd进入刚才创建的文件夹,然后运行vue项目

cd vue-echarts
npm run serve

请添加图片描述
成功后的效果
请添加图片描述
以下是几个常用的命令

  • 下载插件供我们的程序使用
npm install +插件名@版本号
  • 运行vue程序(要在src所在的层级目录执行)
npm run serve
  • 将写好的vue程序打包(打包后的程序可以通过nginx或toncat进行部署发布)会生成一个dist文件夹
npm run build

导出vue脚手架的默认配置

npm inspect >xxx.js

三、脚手架配置解说

1.配置解说

常规情况下vue脚手架中会包含以下文件及目录:

	├── node_modules 
	├── public
	│   ├── favicon.ico: 页签图标
	│   └── index.html: 主页面
	├── src
	│   ├── assets: 存放静态资源
	│   │   └── logo.png
	│   │── component: 存放组件
	│   │   └── HelloWorld.vue
	│   │── App.vue: 汇总所有组件
	│   │── main.js: 入口文件
	├── .gitignore: git版本管制忽略的配置
	├── babel.config.js: babel的配置文件
	├── package.json: 应用包配置文件 
	├── README.md: 应用描述文件
	├── package-lock.json:包版本控制文件

通俗点来说:

  • node_modules 存储依赖的插件
  • public
    • index.html vue插件渲染之后的页面会挂载到这个页面下
  • src存放插件及vue相关配置
    • assets存储静态文件logo等
    • components存储功能性插件
    • App.vue 管理其余插件的插件
    • main.js程序入口
  • package.json 依赖项、程序名等基本配置放在这里(有这个可以通过npm i一键安装项目需要的配置)
  • vue.config,js 可以配置代理解决跨域问题,进行个性化定制
    在这里插入图片描述
    package.json
    在这里插入图片描述
    大致的功能即是如此,详细的功能还需要自己向下探索。

2.我的第一个vue程序

这个代码就是咱们在上一篇博文中提到的程序,通过main.js管理App.vue,然后通过App.vue管理Student.vue与School.vue组件,并将渲染后的页面挂载到index.html页面下。
在这里插入图片描述
在这里插入图片描述
代码与前面无异这里我就不放了。祝大家生活愉快


在这里插入图片描述

Logo

前往低代码交流专区

更多推荐