文章目录
更多关于Vue.js的系列文章请点击:Vue.js开发实践(0)-目录页
Vue.js是一款由国人开发的流行前端js框架,为了更快速地开发,我们需要安装一些开发环境和脚手架。
一、VUE脚手架介绍
Vue 提供了一个官方的 CLI,为单页面应用快速搭建 (SPA) 繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验,以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档。
简单地说,Vue脚手架能够快速为我们搭建开发环境。
使用脚手架的好处:
-
脚手架是通过webpack搭建的开发环境
-
使用ES6语法,在低版本的浏览器中会转换为ES5去兼容
-
打包和压缩js为一个文件
-
项目文件在环境中编译而不是在浏览器中,这样的话访问速度更快
-
实现页面自动刷新,即修改实时生效
二、VUE脚手架的安装
2.1、安装node.js
从node官网下载并安装node:node.js下载
安装完成后,打开命令行工具输入命令node -v,如下图,如果出现对应版本号,就说明安装成功了。
2.2、安装cnpm
cnpm是淘宝NPM镜像,一个用于下载依赖的工具。
直接在命令行中输入
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
等待安装完成后,输入cnpm -v
则可查看其是否安装成功
2.3、安装vue
在用 vue.js 构建大型应用时推荐使用 npm 安装,npm 能很好地和诸如 webpack 或 browserify 模块打包器配合使用。vue.js 也提供配套工具来开发单文件组件。
在命令行中使用cnpm安装vue
cnpm install vue
通过vue -V
查看是否安装成功:
2.4、安装vue-cli脚手架构建工具
vue-cli 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目:
在命令行中输入:
$ cnpm install --global vue-cli
三、创建基于webpack模板的项目
3.1、创建过程
要创建项目,首先我们要选定目录,然后再命令行中把目录转到选定的目录。可以使用:
$ vue init webpack my-project
my-project为自定义项目名
运行初始化命令的时候回让用户输入几个基本的选项,如项目名称,描述,作者等信息,如果不想填直接回车默认就好。
需要注意的是项目的名称不能大写,不然会报错。
进入初始化好的项目当中,下载项目所需的依赖:
$ cnpm install
下载好依赖后,在项目中使用cnpm运行项目,默认打开的是localhost:8080端口运行项目
$ cnpm run dev
3.2、项目结构
3.3、src文件
-
asset:存放图片字体
-
component:存放组件的文件夹
-
App.vue:根组件
-
main.js:最重要的一个文件,在里面导入了VUE和根组件App.vue