1安装 脚手架和打包工具 创建项目
npm install -g vue-cli
npm install -g webpack
vue create 项目名
创建vue项目时报错:vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。
所在位置 行:1 字符: 1
原因:没有添加环境变量
解决:
如果安装 nodejs 的时候没有修改默认安装位置,在 c 盘里搜索 vue.cmd;如果不清楚安装位置,在文件管理器全局搜索vue.cmd 。
右键选择“打开文件所在目录”,将vue.cmd的路径添加至系统环境变量path中。
此电脑>右键属性>系统设置>高级系统设置>环境变量,在系统变量中添加path。
2配置路由
1.安装 vue-router@3.5.1
2.创建 router文件夹 并创建 index.js
3.引入VueRouter 和 Vue
4.Vue.use(VueRouter)
5.创建VueRouter实例: const router = new VueRouter({ routes})
//1.导入VueRouter import Vue from "vue"; import VueRouter from 'vue-router' import HelloWord from "../components/HelloWorld.vue"; //2.使用路由 Vue.use(VueRouter); //3.创建VueRouter的实例 const router = new VueRouter({ //tips:不想要 #(锚点)就添加下面代码 mode:'history', //4.配置路由的path和组件 routes :[ { path: "/", name:'home', component: HelloWord, }, { path: "/about", name:'anout', component: () => import("../components/About.vue"), }, ] }) //5.导入路由实例 export default router
import Vue from 'vue' import App from './App.vue' //6.引入导出的路由 import router from './router/index' Vue.config.productionTip = false new Vue({ //7.注册路由 router, render: h => h(App), }).$mount('#app')

