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
学习之路很长,活到老,学到老.未完待续,…