登录
  • 欢迎访问薛敬官方网站!每天分享技术和创业干货,与大家共同学习共同进步!!! QQ群
  • Git主题现已支持滚动公告栏功能,兼容其他浏览器,看到的就是咯,在后台最新消息那里用li标签添加即可。
  • 最新版xuejing主题已支持说说碎语功能,可像添加文章一样直接添加说说,新建说说页面即可,最后重新保存固定连接,演示地址
  • 百度口碑求点赞啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊http://koubei.baidu.com/s/googlo.xj
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏薛敬官网吧
  • 薛敬的淘宝店铺已经开张了哦,传送门:http://shop1111111.taobao.com

vue开发项目详细教程(第一篇 搭建环境篇)

vue admin 134次浏览 0个评论 扫描二维码

 最近换了新电脑,搭建vue开发环境碰到了不少坑,因为vue更新了webpack4.0版本,使用之前的方法搭建竟然不行了。好了废话不多说,直接开始最新的搭建方法。

1.安装node.js

  首先要搭建vue的环境需要借助node.js的npm的包管理器,所以第一步就是安装node.js和配置node.js环境,

安装和配置教程请参考我写的node安装配置教程:http://xj.gounixia.com/nodejs/aa.html

按教程走完之后再回到这里,继续开始下一步。(已经安装node.js配置好环境的忽略这一步,直接开始)

2.安装vue-cli脚手架和webpack

  首先win+R打开cmd, (装了git的也可以使用git,使用方法一样的),输入命令行:

1. npm install -g vue-cli               全局安装vue-cli

2.npm  install -g webpack          全局安装webpack

3. npm install -g webpack-dev-server       安装webpack的本地webserver

4. npm install -g –save-dev webpack-cli  安装webpack-cli

(当时在这里我就碰到一个大坑,因为在webpack4.0版本之前是不用安装webpack-cli的,安装webpack就已经带有了,但是现在一定要装这个才不会报错)

安装完成后分别输入vue -V(注意,这里的 vue -V,这个V是大写的) 和 webpack -v  回车 查看vue-cli和webpack 是否安装成功(如果成功就会显示版本号)。

3.创建你的vue项目

  A.1 首先在CMD上切换盘符(就是把路径切换到你的项目的盘,例如你的项目放在E盘),那么就输入 E:  (注意要带上冒号)然后回车,如下图:

然后开始新建项目并初始化,输入: vue init webpack vue_glht 注意,在这里的vue_glht 是我创建这个项目的文件夹,名字你们可以自己规定

? Should we run npm install for you after the project has been created? (recom           
mended) (Use arrow keys)    这里的意思是说: 项目创建后,我们应该为您运行npm install吗?(使用上下箭头键选择)

> Yes, use NPM          是的,使用NPM      默认选中这个,直接回车就可以了
Yes, use Yarn           是的,使用Yarn
No, I will handle that myself     不,我会自己处理 


   
  回车之后回安装依赖,等待一会安装完成之后你的项目结构里面会多出一个node_modules的文件夹,里面就是刚才安装的所有依赖了,

接着在命令行中输入 npm run dev 回车让服务器跑起来,跑起来之后会出现如下这样的界面:

在浏览器上输入:localhost:8080就会进到如下图的页面,那么恭喜你,你的环境已经搭好了,可以开始着手写项目了。

开发管理后台项目请看第二篇《第二篇  开发管理后台》 会持续更新,请等待。。。

打赏

薛敬官网 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明vue开发项目详细教程(第一篇 搭建环境篇)
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址