[原创] 一步一步走近Vue(一)

js vue

2017-02-25 1570

Vue.js是一款非常好的客户端js开发框架,尤其是对于有flex开发经验的人来讲,更是容易上手.我在这里将通过vue-cli工具,带领大家一步步走近Vue的开发.

此系列文章针对有一定前端开发经验的人员,对html、js、css基础知识有一定的了解.

前期准备

1. 开发环境搭建


 #nodejs环境搭建
  #  https://nodejs.org/en/
  #  官网下载安装包,根据操作系统进行选择相关的安装包即可
  #  安装后在自己电脑的终端中运行
  node -v #查看nodejs的版本号 验证是否安装成功


2. 编辑器选择


根据自己的喜好选择任意一款文本编辑器
  sublime、atom、webstorm、vscode等


3. vue-cli插件安装


# 在全局环境中安装vue-cli模块
  # https://github.com/vuejs/vue-cli
  sudo npm i vue-cli -g #在安装的时候好注意,全局安装需要管理员权限
  vue version # 安装完成后查看vue-cli的版本信息,验证是否安装成功


相关资源整理

以下整理一些相关的文档资源,如果需要可以自行查看.


Vue.js官网
    https://cn.vuejs.org/
vue-router资料
    http://router.vuejs.org/
http请求模块
    https://github.com/mzabriskie/axios


创建项目

新建一个项目文件夹,在终端命令行中进入此文件夹.创建项目.我这里使用的是以webpack做为模块化管理工具搭建的方式.


vue init webpack vue-first-app # 创建一个项目,在创建项目的时候安装提示内容进行选择即可.做为新手建议把测试框架部分的跳过不安装.
#记得安装的时候vue-router这个选y,安装路由模块
# 如图1
cd vue-first-app # 进入项目文件夹
npm i # 安装指定的项目依赖项
npm run dev # 启动项目,然后会自动打开浏览器,显示以下图2画面即为成功


图1

图1

图2

图2

安装完成之后的项目目录结构为图3,其中src目录为源代码目录,index.html为入口文件.目录说明


build/ # webpack的配置文件目录,用于一些基础调试服务器的搭建,无需修改
config/ # 发布或者调试环境的相关配置信息
node_modules/ # nodejs需要的所有模块包都安装在此目录中
src/ # 项目的源代码目录,以后我们的主要工作都是针对此目录进行
static/ # 静态资源文件
.babelrc # babel插件使用的配置文件
.editorconfig # 编辑器的配置文件,主要是换行 缩进 编码格式等
.gitignore # git忽略配置文件
index.html  # 主html模版文件
package.json  # nodejs项目配置文件
README.md  # 项目说明文件,建议以后在开发中都加入此文件

图3

图3