文章目录
-
-
- 准备工作
- 安装vue
- 搭建demo
-
准备工作
1、安装node.js，相当于vue项目的运行环境。选择自己电脑合适版本，直接下载安装（注意下载长期支持版）。程序里包含npm，安装后即可执行npm命令。
不用谢我：node.js官网下载地址.
2、打开命令行，检查是否安装成功
输入：node -v 查看node版本
输入：npm -v 查看npm版本
如下图说明安装成功：
安装vue
1，使用npm前，修改为淘宝镜像，类似于maven修改镜像，国内的下载会快很多
a,命令行输入：npm config set registry https://registry.npm.taobao.org 语句执行完ok了
b,查看是否修改成功语句： npm config get registry
下图所示即为修改成功
2，使用npm命令安装vue
a,安装vue
命令行执行： npm install vue -g这里的-g 是指安装到全局目录中
b,安装vue-router （vue官方路由管理器）
命令行执行：npm install vue-router -g
c,安装vue-cli （vue脚手架，快速搭建项目）
命令行执行： npm install vue-cli -g
下载可能会有点慢，耐心等待！没有网络原因，基本都是正常安装
查看下vue版本： vue -V（注意V是大写）
如上说明安装成功
搭建demo
vue安装成功，终于可以创建第一个项目了！
1，在本地创建项目目录（我是在F盘下建了project文件夹），命令行cd 进入项目目录
2，两种方式搭建vue项目，第一种命令行执行语句搭建；第二种使用vue UI 命令打开图形化界面搭建。这里介绍第一种，第二种大家可以自己尝试下，命令行直接输入 vue UI 回车，会在浏览器打开页面，跟着页面提示操作就行。两种原理相同，都是选择其他依赖和配置，第二种对于用户更友好。
a，命令行执行： vue init webpack vuedemo （webpack是官方推荐的标准模板名，vue3.x之后使用vue create vuedemo 会更加方便，这里使用的是标准模板）
这个提示我暂时也不清楚什么原因，希望有人在评论区解答，万分感谢。按照提示执行命令，安装完成后再次执行vue init webpack vuedemo
图中说尽量别用的依赖是个语法检测工具，对于新手很不友好，如果你多一个空格，可能项目就启动不起来。其余按照自己爱好，y or n 自己选择就行。
项目创建成功，启动项目
提示创建成功，可以访问网址查看
浏览器访问看到此界面，说明项目正常启动，可以用编辑器打开撸代码了！
如果新手学习，可以到慕课网或者B站上搜索相关视频，进行学习。
文末福利，vue的谷歌开发插件下载地址：Vue Devtools. 安装方法网站描述的也很详细。
创作不易，给个赞吧