Vue2.0 环境搭建到运行

Vue2.0 从环境搭建到发布

1 Vue2.0 推荐开发环境

1.1 Node.js

Node.js
Node.js

1.1.1 Node.js介绍

简单的说 Node.js 就是运行在服务端的 JavaScript。

Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好。

1.1.2 Node.js安装配置

安装包及源码下载node.js官网

本文实例以6.10.2版本为例,其他版本类似,安装步骤如下:

  • 1 点击安装包后,一直点next(下一步)就行了,然后会出现安装目录。默认安装目录 "C:\Program Files\nodejs" , 你可以修改目录,并点击next,最后出现Finish界面,点击finish退出安装向导。
  • 2 检测PATH环境变量是否配置了Node.js,打开系统终端(cmd),输入命令"path",输出如下结果里面带有nodejs字样的,就证明环境变量配置好了。
  • 3 检测Node.js版本,输入node -v就会显示一个版本号,例如v6.10.2。

1.2 NPM

1.2.1 NPM介绍

NPM(node package manager)是随同NodeJS一起安装的包管理工具,通常称为node包管理器。

顾名思义,它的主要功能就是管理node包,包括:安装、卸载、更新、查看、搜索、发布等。npm的背后,是基于couchdb的一个数据库,详细记录了每个包的信息,包括作者、版本、依赖、授权信息等。它的一个很重要的作用就是:将开发者从繁琐的包管理工作(版本、依赖等)中解放出来,更加专注于功能的开发。

1.2.2 npm包安装模式

在具体介绍npm包的管理之前,我们首先得来了解一下npm包的两种安装模式。

本地安装 vs 全局安装(重要)

node包的安装分两种:本地安装、全局安装。两者的区别如下

本地安装:package会被下载到当前所在目录,也只能在当前目录下使用。

全局安装:package会被下载到到特定的系统目录下,安装的package能够在所有目录下使用。(:带有-g字样的命令行就是全局安装,反之就是本地安装)

1.2.3 npm国内镜像

使用国内镜像,下载速度更快,推荐安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

然后输入

npm info underscore

如果上面配置正确的话会出现response

1.2.4 package.json配置文件

每个项目的目录下面,一般都有一个package.json文件,定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。

npm install 命令根据这个配置文件,自动下载所需的模块,也就是配置项目所需的运行和开发环境。下面是一个完整的package.json文件

package.json
package.json
字段说明
  • 1 name 定义项目的名称(必填)
  • 2 version 定义项目的版本(必填)
  • 3 description 项目的简介(选填)
  • 4 scripts 指定运行脚本命令的npm命令行的缩写,比如dev指定了npm run dev时,所需要执行的命令
  • 5 dependencies 指定了项目运行所依赖的的模块
  • 6 devDependencies 指定了项目开发所需要的模块

比如:

npm install jquery --save时表示jquery模块会写入dependencies属性

npm install css-loader --save -dev 表示该css-loader模块会写入devDependencies属性

1.3 webpack

webpack

1.3.1 webpack介绍

Vue的组件都是通过.vue或者像微信小程序的.wxml和.wxss等自定义的组件都无法被用户端的各种浏览器解析,需要被翻译和打包成js文件。

这里我们所用的webpack版本号是2.3.3注::后面我在介绍我们工程当中webpack是怎么进行配置的,其实webpack是需要一定的时间才能掌握,这里我们只是把它当做工具来用,知道它在我们整个工程是用来干什么的就行了)

1.3.2 webpack的安装

npm install webpack -g

这个时候由于我们安装了淘宝镜像,cnpm就是代表使用淘宝镜像设置npm(这个时候必须感谢一波,才让我们不要老是搭梯子)

cnpm install webpack -g

(注: 两者其实实现的效果是一样的,区别在于前一个是在外国服务器下的模块,后者是国内的服务器,下载起来会快一点)

1.4 vue脚手架

1.4.1 vue-cli介绍

vue-cli是用来生成模板的vue工程,相当于按照设计好的图来盖房子。微信小程序一开始也会以可视化界面的方式问你是否创建示例工程,其实就是封装了类似的脚手架。

1.4.2 vue-cli安装

npm install vue-cli -g

这个时候我们全局安装的包已经ok了,这个时候我们需要在硬盘中找一个文件夹放工程用的,打开终端进入该目录

比如我在f盘里创建了vue名称的文件夹,然后

cd vue

如图所示

2 创建Vue工程

2.1 创建项目

然后输入命令行(我们现在用的是 vue2.2.6,也就是 vue2.0 的版本)

vue init webpack 工程名字<工程名字不能用中文>

vue init webpack-simple 工程名字<工程名字不能用中文>(创建一个项目结构简单的vue工程)

vue init webpack#1.0 工程名字<工程名字不能用中文> (创建Vue1.0的版本)

这里我们的工程名字取demo08(随便取的,这是工程名,可以看你的心情了取名字)然后会有一些初始化的设置

我很帅,但我不说
  • Project name (demo08) 直接回车默认
  • Project description (A Vue.js project) 直接回车默认
  • Author dzh 写上你的大名
  • Install vue-router? (Y/n) 这个是问你是否安装路由功能,打上Y(yes)省的后面还要再去下(主要还是这个东西必不可少)
  • Use ESLint to lint your code? (Y/n) 这个是一个QA工具,用来避免低级错误和统一代码的风格,可根据自己的情况去选择
  • Setup unit tests with Karma + Mocha? (Y/n) 这个是问你需要使用karma进行vue组件自动化测试吗?这是后面进行单元测试用的,根据自己实际情况选择
  • Setup e2e tests with Nightwatch? (Y/n) 设置端到端测试,Nightwatch? 当然这些都看你自己的爱好了,我这里是没有选择测试功能。

我的选择如图所示

然后回车会出现下面的提示,就是告诉你接下来怎么做

这个时候我们的项目已经创建好了

2.2 项目配置

cd demo08 进入创建的工程目录工程

工程目录如图所示:

安装项目依赖

cnpm install

这个比较快,不过有可能会出现缺了很多依赖库(不过本人用着好像还没出现问题,一旦出了问题就只能npm install重新再进行一次安装项目依赖了,不过从国外服务器下,需要一定的网速和梯子了,否则贼慢

npm install

这个时候你会发现的的demo08文件夹下面多了一个叫 node_modules 的文件夹,这个是一个类似仓库的东西,用来存放我们所依赖的包

2.3 启动项目

终于要到了激动人心的时刻了,对我们要启动项目了,项目启动的默认端口号是8080;所以小伙伴们启动项目的时候要注意是否端口被占用的情况。(注:我用的是8088)

npm run dev / cnpm run dev

输入完命令会自动启动浏览器,就会看到这帅帅的界面了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容