环境配置
- node+npm安装
目前流行的前端框架必备环境,如果没有安装,呐,
一般windows系统下载Windows Installer (.msi) 64位的就可以啦
安装时选择 Add to Path 其他下一步就ok,可以自选安装目录的。
node安装完成后,打开cmd命令提示符,输入 node -v 回车
如果安装成功,会输出版本号 - npm在我们安装node的时候也已经安装好啦,
类似的在cmd中输入 npm -v ,当它输出版本号的时候,就表示我们已经安装成功啦 - 安装vue
cmd输入: npm install vue (vue安装) 不见红就ok - 安装构建工具
vue-cli
cmd输入: npm install –global vue-cli (Vue.js 提供的一个官方命令行工具,可用于快速搭建大型单页应用)
完成后可以通过cmd输入 vue -V (大写的V喔),输出版本号就对啦
至此 我们的vue环境就配置好啦
创建项目
- cd进入一个存放工程的文件夹,如果在不同的盘,先切换盘,再cd进入文件夹
- cmd输入: vue init webpack test
这里的 test 就是我们想要创建的项目的名称(不能是中文),可以改的,名字你喜欢就好
回车后出现如图,就是填写项目的一些信息,不拘小节的少侠一路飙回车就好, - 看到图片里的
To get started:
了嘛? 挨着执行就好
cmd输入: cd test (进入项目)
在执行下一步之前一定要说: 请保持网络通畅!!!
- cmd输入: npm install (安装项目需要的依赖)
这个需要一点时间,建议定个外卖再继续
cmd输入: npm run dev
进入开发模式,浏览器会自动打开一个页面,网址是http://localhost:8080/
,如果没有打开,也可以自行访问
酱酱~就是它!
如果出现下图错误
这个问题是8080端口号被占用了
解决:
打开 项目目录下–>config–>index.js
如图:看到8080了嘛? 改掉就好啦,选择恐惧症的宝宝不如我们一起改成8090?