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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u013144287/article/details/78659647

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

 

 

展开阅读全文

没有更多推荐了,返回首页