创建一个入门的Vue项目

2018年8月30日23:54:27 发表评论 阅读(2,471)

vue还是比较容易上手的,所以获得开发者的青睐,这是一个原因。下面记录一下,创建一个入门vue项目的过程,记录自己学习的点滴。

首先

需要满足的前提:安装node.js和npm以及安装需要的工具webpackvue-cli,从Node.js官网下载对应平台的安装程序,目前版本的node.js都已经集成了npm,所以安装node.js就可以了。安装完成后,在windows环境请打开命令提示符,然后输入node -v,如果安装正常,你应该看到v6.10.3这样的输出:

C:\Users\John>node -v

v6.10.3

那么npm是什么呢,我之前写过一篇文章,戳这里:https://www.haoht123.com/1054.html

输入npm -v,如果安装正常,你应该看到3.10.10这样的输出:

C:\Users\John>npm -v

3.10.10

安装webpack,依然是在命令行安装,输入npm install webpack -g,其中-g代表全局安装,是英文global的缩写。输入webpack -v,如果如下方显示4.17.1,则表示安装正常。

C:\Users\John>webpack -v

4.17.1

安装vue -cli,依然是命令行安装,输入npm install vue-cli-g。完成后输入vue -V(注意是大写的V),如果下方显示2.9.1,则表示安装正常。

C:\Users\John>vue -V

2.9.1

然后

输入vue init webpack demo demo是你要创建的项目名字,本文以demo为例,注意:不可以为中文,一路回车,等待下载完成就好。

创建完成的目录结构以及描述如下:

创建一个入门的Vue项目

最后

输入npm run dev运行项目,如果出现了以下页面,则表示success:

创建一个入门的Vue项目

 

完。


 

weinxin
微信小程序
互联网开发,终身学习者,欢迎您的关注!
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛