建立简单的VUE项目

前言

• node.js

Node.js是一个Javascript运行环境(runtime)，发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。Node.js对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快，性能非常好。 Node.js是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动， 非阻塞I/O模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。总结一下，node,js提供了javascript在浏览器以外的一个执行环境，满足一些特定的场景需求。

• npm

npm 是 nodejs 的包管理和分发工具。它可以让 javascript 开发者能够更加轻松的共享代码和共用代码片段，并且通过 npm 管理你分享的代码也很方便快捷和简单。通过npm可以更方便的引用和分析基于nodejs开发的类库和插件。

• webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。通过webpack可以把基于模块开发的前端工程代码打包成可以在浏览器使用的格式。

• vue2

是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件系统和vue生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。在开发中vue会把使用vue语法修饰的html标签与js对象进行绑定，从而使html值变化时可以同步修改js对象，js对象值变化时可以在页面暂时，使开发从复杂的document操作中解脱出来。

•  iview

一套基于 Vue.js 的高质量 UI 组件库，通过iveiw可以快速的开发出风格一致的前端界面。

 node.js的安装

 下载地址：Download | Node.js，下载完成后直接默认安装。

打开cmd，输入命令验证是否成功。

node -v

npm -v

 搭建项目

1.打开idea，新建项目：create new project -> static web -> 输入 project name并选择存储空间 -> finish

 2.安装教授架工具

    首先指定npm的镜像地址，提升成功率和下载速度。

    在 Terminal中输入：

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

   替代：npm install grunt -g --save-dev

         其中，

    npm(node package manager)是Node.js的包管理器，用于node插件的安装、卸载等的管理；

    -g 表示全局安装

    --save 将保存配置信息至package.json (node.js项目的配置文件)

    -dev 信息保存在package.json的devDependencies节点，不指定会保存在dependencies节点下。

    npm卸载命令 npm uninstall [-g][--save-dev]

    npm更新命令 npm update [-g][--save-dev]

    npm更新全部 npm update [--save-dev]

    npm查看帮助 npm help

    npm查看当前目录安装命令 npm list

 之后，查看设置后的registry配置，是否设置成功：

      npm config get registry;

    确认成功后，开始安装脚手架工具，在Terminal内继续输入命令：

        npm i -g vue-cli;

 测试是否安装成功：

  vue -v;

 脚手架安装成功后，初始化包结构：

  vue init webpack project-name

    其中，webpack默认版本为2.0，若想指定1.0，需要在webpack后加#1.0，完整命令为：

vue init webpack#1.0 project-name

    接下来，按提示顺序输入即可：

        ?Project name (项目描述。如无需描述，则直接回车跳过，下同)

        ?Project description (项目描述)

        ?Author (作者)

        ?Vue build (构建模式，一般默认第一个)

        ?Install vue-router? (是否安装vue-router。选择安装)

        ?Use ESLint to lint yout code? (格式校验。按需选择)

        ?Set up unit tests (测试相关。按需选择)

        ?Setup e2e tests with Nightwatch? (测试相关。按需选择)

        ?Should we run 'npm install' for you after the project has been created? (是否自动安装。按需，选择No后续需要手动执行npm install)

    至此，项目就可以运行了。输入执行 npm run dev，按照打印台url就可以访问项目了

注意：

    在开发时，会发现新建文件时并没有.vue格式文件的选择，这是需要做如下设置：

        File -> Setting -> Editor -> file and Code Templates -> +

    模板内容可按需自定义

<template>

    <div> {{msg}}</div>

</template>

<style></style>

<script>

    export default{ data () { return {msg: 'vue模板页'} } }

</script>