vue脚手架搭建
前言
现在vue真的是大火,好多热门的项目前端界面都是用vue搭建的,是一个用于创建用户界面的开源JavaScript框架,也是一个创建单页应用的Web应用框架。 2016年一项针对JavaScript的调查表明,Vue有着89%的开发者满意度。在GitHub上,该项目平均每天能收获95颗星,为Github有史以来星标数第3多的项目。如果你听说过AngularJs的话,那么你可以把vue看成是Angular的轻量版。Vue关注的核心是MVC模式中的视图层,同时,它也能方便地获取数据更新,并通过组件内部特定的方法实现视图与模型的交互。
最近我也尝试了一把,如果你是直接看的vue教程的话,大部分新手教程是说的直接引入vue.js文件到页面中,这就像直接引入jQuery一样,这时候就很纳闷,和见过的开源项目的vue架构不一样,如vue-admin项目的架构:
,这种和直接引入vue.js的区别是什么呢?或许你又看到了很多人写vue用到了webpack,vue-cli,他们又是干什么的呢?
vue构建方式
直接引入vue.js文件只能使用一些基础的API和局限的功能,一般主要用于学习vue特性和小型web项目,所以当在实际工程中,尤其是如今强调的大前端时代,前端实现工程化,和后端独立开,所以说前端的项目架构也很复杂,而webpack就是一种前端项目的架构工具,而vue-cli是vue官方提供的架构工具。
webpack构建方式
在vue-cli没有出现之前,大多数vue项目都是用vue+webpack的工作流方式来构建,需要自己来配置vue-loader (loader 用于对模块的源代码进行转换。loader 可以使你在 import
或"加载"模块时预处理文件,因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言(如 TypeScript)转换为 JavaScript 或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import
CSS文件!)和 css-module(Less、SASS、PostCSS)怎么配置,如何安装使用eslint(规范编程)和editorconfig(编辑器进行设置)等,这些内容都是需要手动配置一个具体项目的webpack打包文件。
vue-cli构建方式
而vue-cli出现后,只要按照官网敲几行命令就可以新建一个基本的vue项目框架,可以快速的直接进入业务代码的开发阶段,可以说是vue-cli 里面包含了webpack, 并且配置好了基本的webpack打包规则。
demo
如果使用vue-cli脚手架来构建vue项目,首先需要安装node.js,node是一个服务器端语言,是以js为基础的服务端语言,而npm是node的一个组件,他可以说是前端文件包的组合管理器,安装完node.js,并且将node添加到系统环境变量中,然后打开命令行,输入:
npm -v
安装webpack
安装好 npm 之后,就可以通过 npm 命令来下载各种工具了。安装打包工具 webpack,-g 表示全局安装。
npm install webpack -g
安装vue-cli
安装 vue 脚手架项目初始化工具 vue-cli,-g 表示全局安装。
npm install vue-cli -g
创建项目
环境已经搭建完成,现在我们通过 vue-cli 来生成一个项目,名称为 vue-demo。
vue init webpack vue-demo
然后命令行会提示信息,一路根据提示输入项目信息,不懂的化直接默认,等待项目生成。
依赖管理是 npm 的核心功能,原理就是执行 npm install
从 package.json 中的 dependencies, devDependencies 将依赖包安装到当前目录的 ./node_modules 文件夹中。
所以进入项目根目录用命令 npm install安装,最终会生成如下项目结构:
安装完成之后,执行应用启动命令,运行项目。
npm run dev
命令执行之后,如果显示 “I Your application is runing here …”,就表示启动成功了。
浏览器访问对应地址,如: http://localhost:8080,会出现 vue 默认的介绍页面。