继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

vue入门(安装环境与搭建项目)

慕姐8265434
关注TA
已关注
手记 1147
粉丝 221
获赞 1064

 前言   

        最近一同事项目上需要用到vue技术,对于完全没有学过,只是对vue充满好奇的路上,在目前结束项目且比较闲的今天,入手学习了下vue。先从安装环境与搭建项目开始。为下一个项目做准备!

        互联网这一行业,一旦没有项目也就意味着离离职不远了,所以保持点危机感,对于未知的前方也许碰到了这项技术,你可以说正好我会,正好我熟悉,正好我精通。机会总是留给有准备的人,不是嘛~

        【写这篇文章时,我对 vue.js的了解,只限于用来做移动端,是一个框架。】

入坑路线如下:

第一步:先了解官方文档,看自己是否适合学习

第二步:百度查找有关搭建vue项目的方法(自学的情况下),有技术人员在,这篇文章你可以翻篇儿啦。像我一样自学可以跟着我的步骤走,也可以跟着我参考文章的步骤走。

这里附上两篇我的参考文章,这里是两种方法,任选一就好,我太笨了,果断的将两篇给结合了,花了很多时间。


今天在安装的过程里,截了不少图,所以想整理一下,做一个记录,以后说不定也能用上。

安装环境:

Node.js官网里下载安装包(左边为稳定版,右边为最新版,建议用谷歌浏览器下载,这个过程中用360与火狐浏览器下载都失败了)

webp

下载稳定版node.js

下载后一路next,安装成功后,执行cmd命令(window键+R输入cmd回车),在cmd输入命令 node -v,回车 及 npm -v,回车,如果出现下面的版本信息则表示安装成功。我是稳定版本,所以为V8.11.3。(如果是最新版本,则为v10.8.0),这里npm在安装node.js时系统自带。

webp

检测是否成功安装

构建vue项目

1.全局安装(这个过程里输入命令点击回车后,需要等待一会,等加载后出现下一行命令再进行输入)

1、输入:npm install -g vue-cli 回车

webp

全局安装vue-cli

2、输入:npm config set registry https://registry.npm.taobao.org)  回车【如果使用csdn,执行2、3,不使用可以跳过本步骤】

webp

安装淘宝镜像

3、输入:cnpm install node-sass  --save (使用淘宝镜像安装node-sass)回车

      输入:cnpm install node-sass --save-dev   回车

      输入:cnpm install sass-loader --save-dev  回车

webp

安装save-dev

2.创建项目

下面是对项目名称的解释,来自简书作者一岑不冉

webp

来自            一岑不冉 对各种名字的解释

1、输入:vue init wepack my-project   回车(依次创建自己的项目名称,以下的是直接创建到c盘。)

webp

将内容创建到C盘里

输入:cd my-project   回车

webp

npm安装

输入:npm dev   回车跑起来

webp

8080表示ok

在浏览器输入:http://localhost:8080  运行

webp

成功



作者:耳耳日记
链接:https://www.jianshu.com/p/57d431e52fa3


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP