二、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 条评论
登录 后参与评论

相关文章

来自专栏从零开始学自动化测试

python测试开发django-1.开始hello world!

当你想走上测试开发之路,用python开发出一个web页面的时候,需要找一个支持python语言的web框架。django框架有丰富的文档和学习资料,也是非常成...

19730
来自专栏PHP在线

PHP 安全性漫谈

原文出处: 彭长霖 本文所讨论的安全性环境是在Linux+Apache+Mysql+PHP。超出此范围的安全性问题不在本文范畴之内 一、apache serv...

39770
来自专栏数据之美

shell 学习笔记(19)

声明:转载需署名出处,严禁用于商业用途! 1801.关于 nohup 后台运行的问题: nohup就是拒绝hup信号,没什么其他用途, 如...

25650
来自专栏Huramkin的归档库

ps命令常见用法

Linux中的ps命令用来列出系统中当前运行的那些进程,查看它们的运行状态,占用的资源

18510
来自专栏北京马哥教育

精通Linux常用的100+命令大全万字详解长文(珍藏版)

运维行业正在变革?推荐阅读:30万年薪Linux运维工程师成长魔法 Linux提供了大量的命令,利用它可以有效地完成大量的工作,如磁盘操作、文件存取、目录操作、...

612100
来自专栏数据和云

故障诊断 | 系统级追踪诊断方法及案例分享

所谓操作系统,是应用程序与服务器硬件进行沟通的中间层。应用程序的所有操作,都是和操作系统进行沟通交互。操作系统负责将所有交互转化为设备语言,进行硬件交互。 我们...

35730
来自专栏用户2442861的专栏

redis 学习指南

http://www.cnblogs.com/hoojo/p/4466024.html

22510
来自专栏玄魂工作室

如何学python 第十五课 脚本结构与linux下的编辑与执行

第十五课 脚本结构与linux下的编辑与执行 今天我们不讲具体的python技巧。今天讲讲在linux下,从脚本创建到执行的过程。如果需要看win下的,可以留言...

358140
来自专栏丑胖侠

Zookeeper开源客户端Curator之基本功能讲解

简介 Curator是Netflix公司开源的一套Zookeeper客户端框架。了解过Zookeeper原生API都会清楚其复杂度。Curator帮助我们在其基...

38350
来自专栏飞雪无情的博客

一个简单的Golang实现的HTTP Proxy

最近因为换了Mac,以前的Linux基本上不再使用了,但是我的SS代理还得用。SS代理大家都了解,一个很NB的Socket代理工具,但是就是因为他是Socket...

21230

扫码关注云+社区

领取腾讯云代金券