Vue学习笔记-从0到1搭建实战项目

新建项目

vue create hello1

注：项目名称不能有大写字母（Warning: name can no longer contain capital letters）

新建项目

vue create hello1

http://localhost:8080/

vscode导入文件

用vscode导入文件

新增页面

1.新增文件views/introduce.vue

2.App.vue新增代码

3.修改router/index.js文件

 

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/introduce',
    name: 'Introduce',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "introduce" */ '../views/Introduce.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

4.效果展示

 

参考

官网

https://cli.vuejs.org/

https://github.com/vuejs

中文

https://vuex.vuejs.org/zh/

vue开发----npm run dev 报错：missing script:dev

第一个页面

vue-cli 3.0 安装和创建项目教程

[Springboot+Vue]做一个权限管理后台（七）：动态加载后台菜单   代码下载

 

常用指令

1.安装脚手架

npm install -g @vue/cli

2.查看vue版本

vue -V；

或

vue --version

后面的V是大写。

3.安装vuex

npm install vuex --save