Vue开发入门

大前端开发如火如荼（Angular，AngularJS, React，Vue），由于Vue相对比较好入门，且由华人开源项目，所以这正是我选择它的理由。

我的开发环境是Windows 10， Visual Studio Code。

首先安装Nodejs 8.x，自带了npm包管理工具，如果不确定自己是否安装，可以在命令行输入node -v显示nodejs版本号

npm -v显示包管理工具的版本，如图：

npm是从国外的网站下载各种包的，速度会比较慢，所以需要换成国内的镜像，这里选择阿里淘宝的镜像，它会10分钟同步一次国外的镜像。

更换方法：在命令行输入：npm install -g cnpm --registry=https://registry.npm.taobao.org

意思是通过npm包管理器，全局安装cnpm工具。输入 cnpm -v验证安装是否成功

表示安装成功了。

接下来需要安装我们需要的Vue-cli 脚手架工具，cli的意思是命令行工具，

在命令行输入：cnpm install -g vue-cli ,验证安装是否成功，输入vue -V，注意V要大写！

表示安装成功了！

接下来还需要安装Webpack工具包，在命令行输入：cnpm install -g webpack

现在开始利用上面安装的工具来创建我们的项目

创建一个文件夹专门放这次的练习代码，如VueProject ,然后进入该文件夹，右击以VSCode打开，进入VSCode开发工具，选择终端菜单-创建终端进入命令行。

在命令行输入：vue init webpack vueDemo1。解释：vue 是指上面我们安装的vue-cli工具，init初始化，webpack 模板工具，vueDeom1 项目名称。

出现命令交互环节：

？project name(vueDemo1) 请输入项目名称，如果直接回车，表示使用默认的vueDemo1作为项目名称，这里我们直接回车。（尼玛，提示名称不够长！>> Sorry, name can no longer contain capital letters.）

那我们就给它取vue-project吧。

? Project description (A Vue.js project) 。项目描述，可以对项目的用途描述一下，直接回车也行。

? Author ，开发者，输入你的名字即可，也可以直接回车

? Vue build (Use arrow keys)

Runtime + Compiler: recommended for most users
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere

上面2项选一项，打包方式，选择第一个即可

? Install vue-router? (Y/n) 是否要安装路由，这里选择是

? Use ESLint to lint your code? (Y/n) 是否启用 ESlint 检测，选择不启用

? Set up unit tests (Y/n) 是否需要单元检测，建议选择不需要。

? Setup e2e tests with Nightwatch? (Y/n) 选择n，：是否需要端对端的检测，建议选择不需要。

? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPM
Yes, use Yarn
No, I will handle that myself

选择第一个。

回车后，自动创建并下载相关的依赖包。如图：