vue项目入门

安装vue 

npm install vue

创建一个vue项目,xxx为项目名

vue create xxx

Vue CLI v5.0.8
? Please pick a preset:
  2 ([Vue 2] babel)
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
> Manually select features

 选择Manually select features

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

按空格取消 (*) Linter / Formatter前的*,按回车下一步，

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel
? Choose a version of Vue.js that you want to start the project with
  3.x
> 2.x

 选择2.x

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel
? Choose a version of Vue.js that you want to start the project with 2.x
? Where do you prefer placing config for Babel, ESLint, etc.?
  In dedicated config files
> In package.json

选择In package.json 

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel
? Choose a version of Vue.js that you want to start the project with 2.x
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N)

选择y表示保存此次选择，并为这次的选择起一个名字，下次创建时可以直接使用，选择N表示开始创建项目

创建成功后在vscode打开 

 在终端输入npm run serve运行项目，运行成功后在浏览器输入http://localhost:8080/查看

终端输入 npm install vue-router@3安装vue-router实现页面路由

npm install vue-router@3

 在components文件夹下创建需要路由的vue组件

 在src文件夹下创建router文件夹存放路由js文件，创建index.js

 index.js:

import VueRouter from "vue-router";
import Vue from "vue";
// 引入组件
import discover from '../components/discover'
import focus from '../components/focus'
import my from '../components/my'
// 注册
Vue.use(VueRouter)

// 声明路由路径
const router =new VueRouter({
    routes:[
        // {path:'/',redirect:'/discover'},
        {path:'/discover',component:discover},
        {path:'/focus',component:focus},
        {path:'/my',component:my}
    ]
})

export default router

main.js :

import Vue from 'vue'
import App from './App.vue'

import router from './router'

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

 在App.vue使用组件路由

<router-link to="/discover">发现</router-link>
<router-link to="/focus">关注</router-link>
<router-link to="/my">我的</router-link>
<!-- 声明路由占位标签 -->
<router-view></router-view>