首先假如你已经安装了node和npm,如果没有的话自己百度安装一下。

如果感觉npm下载速度慢，可以使用淘宝镜像cnpm,链接地址：

http://npm.taobao.org/

安装cnpm

方式一：

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

方式二：

alias cnpm="npm --registry=https://registry.npm.taobao.org \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npm.taobao.org/dist \
--userconfig=$HOME/.cnpmrc"

1、安装脚手架工具vue-cli

打开cmd或者 git bash,输入以下命令全局安装vue-cli

cnpm install --global vue-cli

2、创建初始化vue项目

cd命令进入自己要创建项目的目录或者直接在那个目录shift+鼠标右键->在此处打开命令行窗口或者git bash here,然后输入初始化项目命令：

vue init webpack yv-pai

然后会出现一些选项让你选择，如图：

Project name 项目名开始我们可以直接回车，下面进行选择：

• Install vue-router 安装vue-router路由插件-->选择y
• Use ESLint to lint your code? 使用ESLint进行代码检查-->选择n
• Set up unit tests 设置单元测试 -->选择n
• Set up e2e tests with Nightwatch? 使用Nightwatch设置端对端测试-->选择n
• Should we run 'npm install' for you after the project has been created? 你的项目创建之后进行安装吗？-->回车

安装完成之后，通过cd命令进入到项目目录

 cd yv-pai/

项目的目录结果如下：

然后运行项目

npm run dev

启动完成之后会显示访问地址，我这里是

http://localhost:8081

访问之后出现如下欢迎界面表示启动成功！

3、vue项目编程软件

我这里使用的是sublime软件进行vue项目的开发，大家也可以选择自己喜欢的IDE进行开发。

打开项目后目录结构介绍如下：

4、vue初始化项目流程介绍

1.首先是index.html入口页面

这里的div标签的id是app

2.然后在页面入口js文件main.js中实例化vue，挂载到id为app的div上，并引入组件App,使用模板App,这样App组件就被挂载到了id为app的div上了，即挂载到了index.html中

3.打开初始化的vue组件App.vue，它里面包含了template模板、script脚本和style样式，每个组件都基本由这三个部分组成，在template模板中引入了vue的logo图标，下面的 <router-view/>就是由路由产生的内容会显示在这里

4.打开router/index.js路由js文件，首先引入相关依赖和组件

import Vue from 'vue' //引入Vue
import Router from 'vue-router' //引入路由vue-router
import HelloWorld from '@/components/HelloWorld' //引入HelloWorld组件

通过Vue.use(Router)来使用路由

在规则routes里面定义了访问"/"路径时会跳转到HelloWorld组件，因此会将HelloWorld组件的内容显示在<router-view/>内

5.打开components/HelloWorld.vue组件，会发现这里就是我们访问的网页显示的内容

关于vue的其他功能以后章节将会逐一介绍。

访问我的达人课

访问我的博客 Wang's Blog

关注我的微信公众号获取更多资源