本人因参加一个Web比赛,所以使用到了vue这种前段开发技术,下面简单讲解一下vue的开发环境。
- 必须要安装nodejs(在此不做详细讲解,路径等问题解决了一天,,,,,某些环境还是占用我的c盘,很是苦恼,但是这个问题不大,今后会解决)
安装好之后要在windows终端里检查一下是否安装成功。语法为 node -v
- 搭建vue的开发环境,安装vue的脚手架工具
在windows终端里:npm install vue-cli -g
同样也要在windows终端里检查:npm -v(其实在安装好node之后,npm就已经自动安装好了)
-
接下来创建项目,本人用的是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环境问题,反反复复弄了好多次,吐血。。。。)
- 接下来 进入到你的项目 cd demo
然后运行 npm run dev
- 其实刚刚还少了一步,就是Ctrl+单击,访问出现在下方的一个地址,一般都是 http://localhost:8080若有任何疑问或不懂,请在下方评论,谢谢。