搭建vue的开发环境(不包括nodejs)

本人因参加一个Web比赛,所以使用到了vue这种前段开发技术,下面简单讲解一下vue的开发环境。

  1. 必须要安装nodejs(在此不做详细讲解,路径等问题解决了一天,,,,,某些环境还是占用我的c盘,很是苦恼,但是这个问题不大,今后会解决)
    安装好之后要在windows终端里检查一下是否安装成功。语法为 node -v在这里插入图片描述

  1. 搭建vue的开发环境,安装vue的脚手架工具
    在windows终端里:npm install vue-cli -g
    同样也要在windows终端里检查:npm -v(其实在安装好node之后,npm就已经自动安装好了)
    在这里插入图片描述

  1. 接下来创建项目,本人用的是Visual Studio。可以在windows终端里创建,也可以在Visual终端里创建。下面将在Visual终端里创建。
    首先你得在你的文件夹中新建一个工作空间,然后再进行接下来的操作。
    在这里插入图片描述按照箭头的顺序,就会在Visual终端里看到你自己创建的工作空间,下面我们开始新建一个项目。若没有,你需要cd 进入你自己的文件夹。
       vue init webpack demo      /     vue init webpack-simple demo (两种语法格式都可以,只不过后者所建立的目录更为简单,demo是你要创建的项目名)
    在这里插入图片描述此时正在创建项目了。那么我就给大家说明一下这里的每一行分别都是什么意思。
    ? Project name demo ----------------指定的项目名
    ? Project description n ---------------是否对项目作出说明,大可不必
    ? Author zwk --------------------------  作者
    ? Vue build standalone  ------------- 独立构建(这个地方直接敲回车)
    ? Install vue-router? Yes--------------是否安装Vue路由,推荐安装,是页面跳转用的
    ? Use ESLint to lint your code? No ----------代码规范,可选yes也可以选No
    ? Set up unit tests No -----------------设置单元测试,建议不选
    ? Setup e2e tests with Nightwatch? No -------e2e测试,大型企业项目所选,建议不选
    ? Should we run npm install for you after the project has been created? (recommended) npm -----------选npm

    马上就要大功告成啦(因为之前的nodejs环境问题,反反复复弄了好多次,吐血。。。。)


  1. 接下来 进入到你的项目 cd demo
    然后运行 npm run dev
    在这里插入图片描述

  1. 其实刚刚还少了一步,就是Ctrl+单击,访问出现在下方的一个地址,一般都是 http://localhost:8080在这里插入图片描述若有任何疑问或不懂,请在下方评论,谢谢。

猜你喜欢

转载自blog.csdn.net/YYxiaobao0726/article/details/86546079