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

￡神魔★判官ぃ 2022-03-25 05:48 340阅读 0赞

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

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

--------------------

1.  搭建vue的开发环境，安装vue的脚手架工具  
    在windows终端里：**npm install vue-cli -g**  
    同样也要在windows终端里检查：**npm -v**（其实在安装好node之后，npm就已经自动安装好了）  
    ![在这里插入图片描述][20190118195927948.png]

--------------------

1.  接下来创建项目，本人用的是Visual Studio。可以在windows终端里创建，也可以在Visual终端里创建。下面将在Visual终端里创建。  
    首先你得在你的文件夹中新建一个工作空间，然后再进行接下来的操作。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70]按照箭头的顺序，就会在Visual终端里看到你自己创建的工作空间，下面我们开始新建一个项目。若没有，你需要cd 进入你自己的文件夹。  
       **vue init webpack demo**      /     **vue init webpack-simple demo** (两种语法格式都可以，只不过后者所建立的目录更为简单，demo是你要创建的项目名)  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6L9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70]此时正在创建项目了。那么我就给大家说明一下这里的每一行分别都是什么意思。  
    ? 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**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70 1]

--------------------

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

[2019011819563872.png]: /images/20220325/095a1802a40d4277bab56a0413d3f7d7.png
[20190118195927948.png]: /images/20220325/f20ae369fb614e15b7fcd001cb2d7207.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70]: /images/20220325/1806deaa5144419e97dfda8159492403.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6L9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70]: /images/20220325/c377887b29994fb094da7ac9f34db368.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70 1]: /images/20220325/de7248633645409ead4b8d310c5b38ee.png
[http_localhost_8080]: http://localhost:8080
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70 2]: /images/20220325/651d4a7e280a47d1872e463eea284916.png