vue-cli脚手架开发环境搭建
看了一天的《vue.js实战》此书的基础之后,大概看到第六章,也就是组件之前一章节,然后就准备试着写一下。使用vue-cli脚手架搭建了第一个项目,我是在windows 10上搭建的,并非linux和mac os,搭建流程如下。
一、node安装
1、下载node,下载地址是https://nodejs.org/en/download/,选择windows版本。
2、安装,全部默认下一步
3、检测,win+R键打开命令行,输入 node -v 检验是否安装成功。
注 :安装 vue-cli 脚手架目前需要node版本为 v4.0 以上;
二、 vue-cli 脚手架安装
1、在cmd命令行里面执行命令 npm install -g vue-cli // 加-g是安装到全局
ps: 如果是3.0,则使用命令
npm install -g @vue/cli
2、输入vue命令检验是否安装成功,如图
三、构建初始vue项目
1、取到想要生成项目的路径下,比如我去到F:\project,然后cmd执行命令vue init webpack testproject,过程如图所示:需要注意的是项目名不能够有大写字母,我第一个包含大写字母就构建失败了。
ps:如果是3.0,则使用命令
vue create vue-test
2、去F:\project查看可以看到工程已经生成
四、启动项目
1、推荐使用Visual Studio Code工具打开testproject文件夹即可进行开发。
(1)在终端里面输入npm install命令安装依赖包, npm install 执行可以进行vue已经vue的插件安装,在第三步的时 候,已经初始化了项目,并且在 package.json 里面已经有相关配置,所以在这里可以直接安装;
(2)终端执行命令npm run dev 运行,然后览器输入localhost://8080即可看到vue初始界面
2、使用cmd启动项目
(1)去到项目本身所在目录,我的是F:/project/testproject
(2)npm install命令安装包
(3)npm run dev启动项目
(4)览器输入localhost://8080即可看到vue初始界面