【Vue 快速入门】使用vue脚手架创建一个项目

最新推荐文章于 2024-05-11 07:40:01 发布

酷尔。

最新推荐文章于 2024-05-11 07:40:01 发布

阅读量3.8k

点赞数 3

分类专栏：网页前端高级编程从入门到精通文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/apple_51931783/article/details/128169640

版权

网页前端高级编程从入门到精通专栏收录该内容

59 篇文章 20 订阅

订阅专栏

文章目录

一、环境检查

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

大致的功能即是如此，详细的功能还需要自己向下探索。