安装@vue/cli

Vue CLI 需要 Node.8.9 或更高版本。

输入npm install -g @vue/cli进行安装。

安装成功后输入vue --version检查是否正确。

安装成功vue cli后输入vue create 项目名来进行项目创建。

创建成功后输入npm run serve运行项目，复制网址浏览器输入出现以下页面即为成功。

 

 

vue cli中的路由。

使用npm install vue-router --save安装路由。

1、首先在components中创建基本Home和About的vue组件

2、引入安装好的路由，在src中创建router文件夹来存放路由

3、在router文件夹中创建index.js来配置路由，相当于路由的一个入口

4、写入以下代码

import Vue from 'vue'
import Router from 'vue-router'

import Home from '@/components/Home.vue'
import About from '@/components/About.vue'

Vue.use(Router)

export default new Router({
    routes: [
        { path: '/home', component: Home },
        { path: '/about', component: About },
        { path: '/', redirect: '/home' }
    ]
}
)

routes配置中的每一项代表一条路由规则。
path是URL路径，可以定义路径参数（如“/product/:id”中的id）；name是路由名称，用于引用；
component指定加载的组件名称。
5、在main.js中输入

import router from ‘/router’

6、在new Vue中使用router

new Vue({
    router,
    render: h => h(App)
}).$mount('#app');

7、在app.vue中使用路由

<template>
  <div>
    <p>这是首页</p>
    <ul>
      <li>
        <router-link to="/Home">Home</router-link>
      </li>
      <li>
        <router-link to="/About">About</router-link>
        
      </li>
    </ul>
      <router-view></router-view>
 </div>

</template>

以上，最基本的vue router就创建成功了。

二级路由明天再写。