vue2.0开发环境框架搭建

vue2.0开发环境框架搭建

一、概述

vue.js是一套构建用户界面的渐进式框架。vue采用自底向上增量开发的设计。vue的核心库只关心视图层，非常容易学习，非常容易与其它库和已有项目整合。vue完全有能力驱动采用单文件组件和vue生态系统支持的库开发的复杂单页应用。

vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。

二、vue开发环境框架搭建

1.安装node.js (http://www.runoob.com/nodejs/nodejs-install-setup.html)

2.基于node.js,利用淘宝npm镜像安装相关依赖

在cmd里直接输入：npm install -g cnpm --registry=https://registry.npm.taobao.org，回车，等待安装…

3.安装全局vue-cli脚手架,用于帮助搭建所需的模板框架

在cmd里
1).输入：cnpm install -g vue-cli，回车，等待安装…
2).输入：vue -V，回车，若出现vue版本信息说明表示成功
3).如果vue版本为vue3,可是使用npm install -g @vue/cli-init进行旧版本vue2版本的拉取回退.

4.创建项目

在vsCode开发工具集成终端里输入：vue init webpack vue_test(项目文件夹名)，回车，咱们一步步按照下图操作：

(1)输入项目名称

(2)项目描述

如有同学不想描述,此项可以跳过

(3)创建者默认就可以

(4)创建vue

recommended for most users是推荐给大多数用户的意思,选择这个就可以

(5)是否使用vue-router

输入y表示安装,n表示不安装

(6)是否使用ESLint

ESLint 是一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具,刚开始学习搭建框架时,我一般不安装,如有此方面要求的可以选择安装,这里我选择的standard 据说airbnb非常严格.如果想自己配置不回配置的,可以在网上学习按照步骤在应该不难,有机会在总结吧.

(6)下边就是一些测试插件

Set up unit tests? (Y/n) n 是否需要单元测试；
Setup e2e tests with Nightwatch? (Y/n) n是否需要单元测试；

(7)创建项目后我要不要使用’npm install’安装

这里咱们自己再手动安装吧.选择第三项.

点击enter最后如图

这样你已经把创建项目的配置项已经搞定,胜利就在眼前!

(8)最后安装插件,运行项目

cd project-name(项目目录)；

npm install 安装依赖；
可以用淘宝镜像代理 cnpm install

npm run dev 本地运行项目

把运行成功后,把生成的网址http://localhost:8083复制到浏览器中打开.
成功啦!是不是很简单,相信你按照步骤一步步来,应该没啥问题,希望对你有帮助,爱你们!!!