最近公司一直在使用vue来做项目，今天就把一些使用vue的方法分享一下，希望能对大家有所帮助。同时，有说的不对的地方，欢迎大家能够指出。
一、使用vue-cli脚手架从零开始搭建
首先要确定自己电脑上已经安装了nodejs,可以使用node -v检查一下，如果没有安装请访问nodejs官网，选择自己适合的版本。
1.安装vue-cli：
npm install -g vue-cli
2.使用 vue init webpack first-demo 命令，其中“first-demo”是项目名称，然后会有一些相应的提示配置如下：
? Project name (first-demo) ：输入项目名称，有就写上，没有直接回车键
? Project description (A Vue.js project) ：项目描述，同上
? Author (wudaqian <[email protected]>) ：作者，同上
? Vue build ：直接回车
? Install vue-router? (Y/n) ：安装 vue-router,选择yes
? Use ESLint to lint your code? (Y/n) ：使用ESLint检查代码，选择yes
? Pick an ESLint preset (Use arrow keys)：直接回车
? Set up unit tests? (Y/n) ：根据个人需要，我一般都是选择no
? Setup e2e tests with Nightwatch? (Y/n) : 选择 no
? Should we run `npm install` for you after the project has been created? (recom
mended): 直接回车
最后 cd first-demo 到自己项目文件里，在控制台执行 npm run dev 如图：
到目前来说算是一个小demo算是完成了，接下来会进行一下相应的配置。
二、简单的介绍一下项目结构：
1.build文件：webpack的一些相关配置，使用 npm run dev 时会执行这里的文件（都是配置好的，一般不需要再进行配置）
2.config文件：vue的一些相关配置，后期也会在这里配置一些代理，接口接口跨域问题
3.node_modules文件：一些依赖包，不用管
4.src文件：核心的资源文件，目前里面有三个文件夹，根据项目以及个人习惯进行添加，这里只介绍目前有的
（1）assets文件：存放一些静态资源（css、less、sass、图片、一些外部js文件）
（2）components文件：存放公共的组件
（3）router文件：配置项目路由
5.app.vue：写的组件都在它的基础上运行
6.main.js：入口文件
7.static文件：存放静态文件
三、简单的说一下路由 vue-router ，直接上代码：
1.首先在src文件夹里见一个文件pages（项目中所有的页面都会写在这个文件夹里），然后在pages里创建index、home、hello三个文件夹，如图：
2.修改router文件夹里的 index.js 文件
import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/pages/index'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
redirect: 'index'
},
{
path: '/index',
name: 'index',
component: Index,
children: [
{
path: '/home',
name: 'home',
component: resolve => require(['@/pages/home/home'], resolve)
},
{
path: '/hello',
name: 'hello',
component: resolve => require(['@/pages/hello/hello'], resolve)
}
]
}
]
})
3.在 index.vue 里这样写：使用标签 router-link，to="/路由名字"
在home.vue页面里写入：
在hello.vue文件里写入：
4.最后让我们看一下页面的效果：
点击hemo：
点击hello：
最后，相关vue的知识会持续更新，希望和我一样想要学习vue的小伙伴们有所帮助，写的有问题的地方，欢迎指出，非常感谢！