1、配置 Node 环境。
自行百度吧。
安装好了之后，打开 cmd 。运行 node -v 。显示版本号，就是安装成功了。
注：不要安装8.0.0以上的版本，和 vue-cli 不兼容。
我使用的 6.10.3 的版本，相对稳定。
2、使用 npm 管理依赖
使用 node 自带的包管理工具 npm 管理项目中的依赖，由于 npm 的服务器在国外。经常会遇到速度奇慢或者下载不下来依赖的情况，所以推荐使用淘宝镜像。
npm install-g cnpm--registry=https://registry.npm.taobao.org
这样我们就可以使用 cnpm 代替 npm 执行命令了。
全局安装 vue-cli 模块。
cnpm install vue-cli -g
执行 vue -V （此处是大写的 V），显示版本号表示安装成功。
3、创建项目
先到你的根目录下，运行 cmd 。执行如下代码，创建项目。
vue init webpack <project name>
? Project name 输入项目名称
? Project description 输入项目描述
? Author 作者
? Vue build 打包方式，回车就好了
? Install vue-router? 选择 Y 使用 vue-router，输入 N 不使用
? Use ESLint to lint your code? 代码规范，推荐 N
? Setup unit tests with Karma + Mocha? 单元测试，推荐 N
? Setup e2e tests with Nightwatch? E2E测试，N
4、运行项目
好了，现在我们已经建立好自己项目了。但是还没初始化。
cd <project name> // cd 你刚才写建立的项目名。进入。
cnpm install // 初始化项目，安装依赖。
到此项目已经初始化完毕了，我们可以执行如下命令查看。
cnpm run dev
5、构建路由
找到 src/router/index.js 打开。把它改成如下这样。
import Vue from ‘vue‘ // 引入 vue
import Router from ‘vue-router‘ // 引入 vur-router
import Hello from ‘@/components/Hello‘ // 引入 Hello 模块
import Home from ‘@/components/Home‘ // 引入 Home 模块
Vue.use(Router) // 注册 vue-router
export default new Router({
routes: [
{
path: ‘/‘,
name: ‘Hello‘,
component: Hello
},
{
path:‘/home‘,
name:‘home‘,
component: Home
｝
]
})
到这一步，路由已经配置好了。但是我们还没有home这个页面。
找到 src/router/components/ 打开。
在里面新建一个 Home.vue 。
打开改成以下代码。
<template>
<h1>{{ text }}</h1>
</template>
<script>
export default {
name: ‘home‘,
data () {
return {
text: ‘this is homepage‘
}
}
}
</script>
<style scoped>
</style>
到此，我们的项目已经初始化完成了。切换路由/home就可以看到我们刚才加入的页面了。
原文地址：https://www.cnblogs.com/jianxian/p/10641771.html