项目杂笔记

命令行环境改为淘宝镜像环境

C:\Users\16915>npm config get registry
https://registry.npmjs.org/

C:\Users\16915>npm config set registry  http://registry.npmmirror.com

C:\Users\16915>npm config get registry
http://registry.npmmirror.com/

搭建项目

创建项目

新建一个“项目”文件夹，在“项目”文件夹下创建了一个名为my-app的项目

C:\Users\16915\Desktop\项目>vue create my-app

将这个创建好的项目直接拖进vscode中打开，在终端中cd进入，启动运行一下

PS C:\Users\16915\Desktop\项目> cd my-app
PS C:\Users\16915\Desktop\项目\my-app> npm run serve

运行成功的界面

安装路由

此命令可以安装指定版本

PS C:\Users\16915\Desktop\项目\my-app> npm i vue-router@3.6.5     

配置路由页面

在src目录下创建router文件夹，在文件夹下创建index.js文件（index.js如下）

import Vue from 'vue'
import VueRouter from 'vue-router'
//1、创建组件并导入
import Home from '../views/Home.vue '
import User from '../views/User.vue'
Vue.use(VueRouter)

//2、定义路由，每个路由应该映射一个组件
const routes = [
    { path: '/home', component: Home },
    { path: '/user', component: User }
]
//3、创建router实例
const router = new VueRouter({
    routes // (缩写) 相当于 routes: routes
})

export default router //将router对外暴露 ？不懂

//4、在main.js中配置和挂载路由

在src文件夹下创建views文件夹，存放页面（Home.vue如下）

<template>
    <h1>我是Home组件</h1>
</template>
<script>

export default {
    data() {
        return {

        }
    }
}
</script>

在main.js文件中配置两行代码

1、import router from './router'

2、挂载路由

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router';

Vue.use(ElementUI);
Vue.config.productionTip = false

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

配置完以上步骤，运行一下，npm run serve，会出现以下问题

eslint是一个代码风格管理插件，命名不规范或者缺少符号都会引起报错，但是太过严苛不利于编写代码，可以在vue.config.js中更改配置，加上lintOnSave:false

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false
})

再次运行，我遇到一个小错误，说我Home路径不对

结果检查下来发现是引入时多多写了一个空格

再次运行依然没有生效，需要在App.vue中渲染组件

<template>
  <div id="app">

    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>

  </div>
</template>

运行结果可以实现路由的跳转了

         

嵌套路由

在views文件夹下创建一个主页面Main.vue

在index.js下对其进行配置，首先import引入，再配置routes，主页面路径一般都是 ' / ' 

import Main from '../views/Main.vue'

const routes = [
    //主路由
    {
        path: '/',
        component: Main,
        //子路由
        children: [
            { path: 'home', component: Home },
            { path: 'user', component: User }
        ]
    }
]

最重要一点！在主文件下Main.vue中放置子路由出口

<template>
    <div>
        <h1>main</h1>
        <!-- 子路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>
</template>

我的理解是子路由是跟在主路由屁股后面显示的

            

组件封装

在文件夹components下创建一个侧边栏组件，名为CommonAside.vue，采用container布局，直接复制element-ui对应布局

在主文件Main.vue中引用

import CommonAside from "../components/CommonAside";

注意，刚才有一个小错误，加上花括号运行直接导致引用的组件不显示（如下）

在components中引用

export default {
    data() {
        return {

        }

    },
    components: {
        CommonAside
    }
}

可以直接在想要展示的位置引用组件（注意：名字太长需要使用短横（ - ）来命名！）

 <el-aside width="200px">
                <common-aside />
            </el-aside>

安装Vuex

进入项目，安装指定版本

在src文件夹下创建一个名为store的文件夹，再在该文件夹下创建一个index.js文件