前端Vue学习之路(一)-初识Vue

Vue学习之路（一）

1.引言
2.更换npm国内镜像源
3.用npm下载Vue
4.Vue全家桶
5.使用命令创建项目
5.推荐插件
6.推荐网站
7.学习扩展

1.引言

先安装node.js环境,方便用里面的npm
，默认安装就行,安装之后可以在cmd命令黑窗输出
npm -V查看是否存在,顺便看一下是什么版本

2.更换npm国内镜像源

因为国外的比较慢,用这个命令设置为淘宝镜像
npm config set registry https://registry.npm.taobao.org
设置完之后,可以查看设置成功了没有。可以用
npm config get registry或npm config ls命令查询

3.用npm下载Vue

安装vue最新版本3.x
npm install vue@next

全局安装 vue-cli
cnpm install -g @vue/cli
这里会有小伙伴疑惑,为什么下载两个,我来解释一下
vue是一套框架，用于构建用户界面的渐进式框架。
vue-cli相当于脚手架，给你自动生成模板工程。

查看vue-cli当前版本
vue --version
这里是4.x版本,因为vue-cli通常会比vue高一个版本

4.Vue全家桶

Vue-cli(脚手架)
(这里稍微简单说一下,vue-cli因为热更新太慢,大点的项目要等很久,启动慢,所以才会有新的东西出现要替代他,Vite速度上比他快很多)
Vue-cli和Vite区别
(前者时间久,生态圈很广,后者新生代,速度很快,生态圈偏窄)
相信不久的以后Vite会慢慢替代Vue-cli
Vue-router(路由)
Vuex(状态管理)
Axios(请求数据)

5.使用命令创建项目

vue create vue-demo
回车，很慢要等很久,
先进项目目录cd vue-demo
再使用npm run serve(单词这里结尾不是server)
他这里运行成功之后大概就是这个样子
App running at:

Local: http://localhost:8081/
Network: http://192.168.19.202:8081/

Note that the development build is not optimized.
To create a production build, run npm run build(这个是打包的命令).

回到项目目录下使用命令
npm run build即可生成dist文件夹

5.推荐插件

iview
vant
elementUI
vue-element-admin

6.推荐网站

重置css样式http://meyerweb.com/eric/tools/css/reset/
阿里图标库https://www.iconfont.cn/

7.学习扩展

推荐大家有时间可以学一下nuxt，react-native，angluar，flutter，node.js

学习之路很长,活到老,学到老.未完待续,…