vue2项目搭建

发布时间 2023-04-12 11:32:41作者: 人生海海-

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')