二、VueJs 填坑日记之基础项目构建

在上一篇文章中,大致介绍了一下本系列博文以及学习vuejs我们需要了解的一些概念,希望大家认真阅读,所谓知己知彼,百战百胜,学习也一样,工欲善其事,必先利其器,要想学好vuejs,那前提的概念一定要熟悉。否则在接下来的博文中,遇到一些概念很有可能理解不了。

由于不能FQ,所以之下大部分的操作都是在国内的网站里进行下载或是用的国内代理。

安装NodeJs 下载Node.js,在这里我用的是Node中文网http://nodejs.cn/下载。大家可以按自己电脑的系统来下载不同版本的Node。 关于Linux和Mac安装Node,这里不过多的说明,毕竟本人实在是穷屌丝一个,没人用Mac。

安装Node.js其实特别简单,就是一路Next。在安装的过程中,安装目录建议不要包含中文,避免不必要的麻烦。安装完成之后,在cmd命令行中输入以下命令来查看Node.js的版本:

如果出现以上结果,则表示安装成功。(注:上图中的版本号为8.9.0,在实际安装过程中不一定和我一样)

安装vue-cli脚手架工具 使用win+r快捷键打开命令行(cmd),输入以下命令

npm install -g vue-cli

注: npm:Node的包管理器 install:安装命令 -g:参数,表示在全局进行安装,将来在任何地方都可以使用 vue-cli:安装包的名称 在这里介绍一下npm命令,NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种: 1、允许用户从NPM服务器下载别人编写的第三方包到本地使用。 2、允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。 3、允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。 由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。命令如下,出现版本提示表示安装成功。

安装完vue-cli后,执行vue -V(这里的v是大写),如下图

构建第一个项目 1、为项目创建一个目录 首先我们要创建一个目录,该目录的作用是放我们将来开发的所有项目,比如把项目统一都放在D:/vueworks/目录中,所以使用如下命令来进行创建并进入到该目录。

d:	//切换到d盘
mkdir vueworks	//创建名称为vueworks的目录作为放置项目的目录
cd vueworks	//进入到该目录

2、利用webpack初始化项目

vue init webpack my-vue

至此,我们用刚刚安装的 vue-cli 脚手架命令 vue ,初始化 init 一个以 webpack 为模板的名叫 my-vue 的项目。 这里解释一下这些提示,如下

? Install vue-router? (Y/n)

问是不是需要安装 vue-router ,需要安装,这个是管理路由的。我们直接回车。 出现这样的选项,默认选项一般会是大写,如上 (Y/n) 就表示直接回车,将代表同意,如果你看到了 (y/N) 这样的,就表示,默认选择的是否,这时候,就需要输入 y 然后回车。当然,前提是你决定要这样做。

3、初始化依赖包 初始化依赖包因为需要联网,并且是去连 github ,如果你没有FQ的话,可能速度会比较慢。我们可以使用国内淘宝提供的 npm 镜像源来进行安装,解决FQ的问题。

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成之后,则可以安装依赖包了:命令如下

cnpm install
cnpm run dev	//以开发模式运行项目

如果出现如下图提示,则表示运行成功,可以打开浏览器输入以下的网址进行预览了。

如果浏览器打开和我一样,则表示Node.js和vue-cli构建的项目已经完全没有问题了,你的第一个vue项目已经顺利跑起来了。

附录:

? Vue build (Use arrow keys)
❯ Runtime + Compiler: recommended for most users
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files -
render functions are required elsewhere

这里是问你,需要不需要安装编译器,我们选择需要安装,也就是第一个,也就是直接回车就OK了。

? Install vue-router? (Y/n)

问是不是需要安装 vue-router ,需要安装,这个是管理路由的。我们直接回车。

? Use ESLint to lint your code? (Y/n)

是否需要使用 ESLint 来检查你的代码。我们不需要!

? Pick an ESLint preset (Use arrow keys)
❯ Standard (https://github.com/feross/standard)
Airbnb (https://github.com/airbnb/javascript)
none (configure it yourself)

然后问你需要使用哪种风格来检查你的代码。我们选择No

? Setup unit tests with Karma + Mocha? (Y/n)

是否需要安装测试功能。不要。我们输入 n 然后回车。

? Setup e2e tests with Nightwatch? (Y/n)

还是关于测试的内容,我们还是输出 n 然后回车。 更多关于ESLint的检查请参见:http://hongfanqie.github.io/standardjs/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java成神之路

Linux_总结_01_VMware14虚拟机下安装CentOS7.x

1212
来自专栏私有云搭建

使用kodexplorer将dedecms系统网站秒变私有网盘

国内草根站长用的最多的一款建站源程序就是dedecms,通常是通过FTP或者服务器面板自带的文件管理器来上传下载的。FTP可视性、体验都相对差一点,且需要事先安...

613
来自专栏挖坑填坑

Asp.net+Vue2构建简单记账WebApp之三(使用Vue-cli构建vue.js应用)

923
来自专栏沈唁志

宝塔面板Mysql 5.6版本无法正常启动的解决方法

朋友找我的时候说的是 Mysql 启动不了,看他发的截图是宝塔面板,就要来了面板信息去看了一下

3322
来自专栏编程微刊

如何在本地运行查看github上的开源项目

896
来自专栏tkokof 的技术,小趣及杂念

疑难杂症小记 - POCO的Android编译

想编译下POCO的Android版本,发现官方只支持Linux或者Mac OS X,简单尝试了下cygwin,发现NDK的Windows版本工具链因为使用Win...

762
来自专栏Hadoop实操

如何在CDSW上创建Git工程并提交代码

1113
来自专栏Python爬虫与数据挖掘

如何在vSphere Client上给虚拟机扩容

9、创建磁盘的大小,这里可以自定义,按照自己的需要来进行添加。在这里,小编以50GB为例,设置完之后选择“下一步”。

741
来自专栏IT笔记

MongoDB从入门到“精通”之如何优雅的安装

说一件逗比的事情,昨晚忙活了1个小时,把教程一梳理了一下,其实也没什么好梳理的,就是查阅了一下下命令的使用情况。 本来就很早接触了mongo,只是没有继续深入罢...

3336
来自专栏编程微刊

本地运行github上的vue2.0仿饿了么webapp项目

在vue刚刚开始流行的时候,大多数人学习大概都见到过这样的一个项目吧,可以作为学习此框架的一个模板了

2083

扫码关注云+社区