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

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初始界面