vue-cli脚手架开发环境搭建

我不是女神ヾ 2022-06-03 23:14 281阅读 0赞

vue-cli脚手架开发环境搭建

看了一天的《vue.js实战》此书的基础之后，大概看到第六章，也就是组件之前一章节，然后就准备试着写一下。使用vue-cli脚手架搭建了第一个项目，我是在windows 10上搭建的，并非linux和mac os,搭建流程如下。  
      
    一、node安装  
    1、下载node,下载地址是[https://nodejs.org/en/download/][https_nodejs.org_en_download]，选择windows版本。

2、安装，全部默认下一步

3、检测，win+R键打开命令行，输入 node -v 检验是否安装成功。

![20171128213955020][]

注 ：安装 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命令检验是否安装成功，如图

![20171128214051950][]  
      
    三、构建初始vue项目  
    1、取到想要生成项目的路径下，比如我去到F:\\project,然后cmd执行命令vue init webpack testproject,过程如图所示：需要注意的是项目名不能够有大写字母，我第一个包含大写字母就构建失败了。

ps:如果是3.0，则使用命令

vue create vue-test

![20171128214218733][]

2、去F:\\project查看可以看到工程已经生成

![20171128214320435][]  
  
    四、启动项目

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

![20171129103138451][]

（2）npm install命令安装包

（3）npm run dev启动项目

（4）览器输入localhost://8080即可看到vue初始界面

[https_nodejs.org_en_download]: https://nodejs.org/en/download/
[20171128213955020]: /images/20220604/127faf7127f741a19b0730d69c596c99.png
[20171128214051950]: /images/20220604/d24539bc4a724af6bf466db203645404.png
[20171128214218733]: /images/20220604/e370a919c48449a7be92ecdd72ba43b4.png
[20171128214320435]: /images/20220604/edbae83951614c538d018f2baa34ff39.png
[20171129103138451]: /images/20220604/b31801ce495e4531a1a60122d89406f7.png