作者 adminz 发布于 2018-04-05 修改于

vue2+vux2单页面应用入门实战:1、环境搭建

在传统的Web程序中,前后端开发时需要密切的配合。随着html5 css3 的发展、用户体验要求的提高,前端迅猛发展,node.js的出现使javascript一统前后端的开发,移动互联网的普及,移动开发中也越来越多的使用混合式开发。当前,使用react、ng、vue前端三大框架之一,以ECMAScript 6为标准的JS语言,用NPM管理各种扩展包,最后用webpack打包,进行组件式开发,前后端分离,前端开发就像搭积木一样。

使用 vue2 开发单页面应用,路由使用vue-router,HTTP客户端使用 axios 和远程服务器交互,前端UI组件库选择 vux2 ,另外还需要打包工具webpack、包管理器NPM,当然也少不了这些构建工具的基础服务Node.js。

一、安装Node.js

1、打开Node.js官方网站(nodejs.org),按自己的系统下载相应的版本。以Win10_X64系统为例,下载 8.11.1 LTS(长期支持)版本安装包,点击 node-v8.11.1-x64.msi 文件,点击下一步,同意许可协议,再点击下一步,直到以默认方式安装完成。

node-v8.11.1-x64安装包

 

2、安装完成后,点击 开始-运行 Win+R ,输入CMD,打开Windows命令行终端,运行命令: path ,查看系统的path环境变量中配置了node.exe的目录路径,如果没有请重启计算机或手动配置。

3、运行 node -v 命令,查看Node.js的版本。运行 npm -v 命令,查看npm的版本。如果能正常显示版本号,表示Node.js安装成功。

4、npm源在国外,因为网络原因安装太慢,可以使用淘宝npm镜像。持久使用,运行命令:

npm config set registry https://registry.npm.taobao.org

配置后可通过运行以下命令来验证是否成功:npm config get registry 或 npm info express

nodejs安装成功

 

Node.js 是一个 JavaScript 运行环境,主要特点是:运行在服务器端的、非阻断式I/O的、事件驱动。

更多参考资料见:Node.js中文社区新手入门

https://cnodejs.org/getstart

npm是Node.js的包管理器,在安装Node.js时会一并安装。详情查看npm中文文档

https://www.npmjs.com.cn/

二、安装webpack

1、运行命令: npm install -g webpack ,install 表示安装,-g 表示全局安装。如果出现与fsevent相关的警告信息,是因为 fsevent是mac osx系统的,在win或者Linux下使用了 所以会有警告,忽略即可。

2、运行命令: npm install webpack-cli -g 全局安装webpack-cli 包,在 webpack4.0 之后,命令行单独分出一个包 webpack-cli。

3、检测一下,在命令终端上输入以下命令: webpack -v ,这里输出 webpack 的版本为:4.1.1 ,能正常输出版本,说明 webpack 安装成功了。

如果不想全局安装,要在项目目录下要本地安装webpack 和 webpack-cli,命令分别是:

npm install webpack -D
npm install webpack-cli -D

更多资料参见:“webpack 3 零基础入门教程”:

https://love2.io/@hfpp2012/doc/webpack-tutorial/chapters/1.md

三、安装编辑器: VSCode

Visual Studio Code 是由 Microsoft(微软)发布的一个免费的,开源的跨平台代码编辑器。内置JavaScript、TypeScript和Node.js支持,而且拥有丰富的插件生态系统,可通过安装插件来支持C++、C#、Python、PHP等其他语言。

1、打开其官方网站 (code.visualstudio.com),按自己的操作系统下载相应的版本安装。安装完成后,打开VSCode ,查看扩展。

2、安装 Vetur扩展,让编辑器支持 .vue文件的基本语法高亮。

安装 ESLint 扩展,是一个JavaScript和JSX代码检查工具。

查看JavaScript standard 代码规范:

https://github.com/standard/standard/blob/master/docs/RULES-zhcn.md,

查看ESLint规则:http://eslint.cn/docs/rules/ ,比如要求JS代码使用两个空格进行缩进、字符串统一使用单引号、行尾去掉分号、函数声明时括号与函数名间加空格......等等。

安装 prettier  扩展,因为ESLint扩展代码格式化使用的是prettier,配置prettier,在右键选择进行代码格式化时,使其符合ESLint规则。

3、打开[文件][首选项][配置],在用户配置中,加入以下配置,覆盖默认配置:

{
"git.ignoreMissingGitWarning": true,
"editor.fontSize": 16,
//配置eslint
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
],
//右键格式化文件
"prettier.singleQuote": true, // 单引号
"prettier.semi": false, // 结尾不要分号
}

配置eslint,使其对 vue文件进行检测。"eslint.autoFixOnSave": true,表示每次保存文件(ctrl+s)时,按eslint规则修正代码。

配置prettier,在右键格式化时字符串统一使用单引号,行尾不要分号。(这个插件没有发现“函数名之后和括号之间要有空格”的配置,这样导致右键格式化时不会对这一问题进行修正)

这样配置之后,对不符合eslint规则的JS代码就会有提示,这时右键格式化,再ctrl+s 保存,就会自动修正代码。

这样配置之后,对不符合eslint规则的JS代码就会有提示,这时右键格式化,再ctrl+s 保存,就会自动修正代码。

vscode_vue

至此,vue+vux的开发环境就配置好了,下一节将按vux官方文档,直观感受一个简单的前端单页面应用的基本框架。(请关注公众号:张龙于飞)

---- 未完待续 ----

 

张龙于飞

为技术披上艺术的嫁衣,融在教育的生命中。 

本人关注教育,关注计算机技术,关注web程序设计,专注于教育信息化,爱好吉他、音乐、电影,偶尔表露出一些不合时宜的理想主义。

Thumbnail

如果我喜欢的刚好你也喜欢的话,请关注公众号:张龙于飞