前言

当你开始想要学习vue等框架的时候，那么就意味着或多或少，你都会一些前端的基本功了。

但是我发现，一些前端新手朋友，学习vue的时候，就是硬看视频、硬看文档，完全没有把视频和文档讲述的内容结合到项目中去练习，我个人感觉这种方式，可能看的时候知道是什么东西，但是看完就会忘记，对于个人学习，不是一个好的方法。

那么本篇文档就带着新手朋友们一起学习vue吧。（文章过于小白、不适合高手，仅供前端新手学习使用，不喜可喷）

基本环境配置

现在挺火的vite2： vitejs.cn/

先安装nodejs。nodejs中文网下载地址：nodejs.cn/download/ 下载一个适合你自己的安装包，window下载msi文件直接双击安装即可。安装完执行node -v、npm -v检查一下是否安装成功了。

C:\Users\admin>node -v
v16.13.1

C:\Users\admin>npm -v
8.1.2

然后全局安装vue-cli。脚手架，安装完执行vue --version检查一下是否安装成功了。

npm install -g @vue/cli
OR
yarn global add @vue/cli

C:\Users\admin>vue --version
@vue/cli 4.5.8

到此为止，环境的配置基本就成功了。

创建项目

vue create my-test（你的项目名称）

会出现一大堆选项，根据你的倾向，选择适合你的配置即可。

安装依赖

你可以手动安装一些依赖。

npm install vue-router
npm install vuex
npm install axios
...

也可以执行vue ui可视化界面，进行安装依赖。

vue ui

执行完你会看到这个界面

编辑路径，复制你的路径到框里去，然后导入文件夹。就可以为你的项目安装你想要的依赖了。

右上角安装依赖，然后输入你想要安装的依赖，点击安装，就可以了。

是不是贼简单。

构建目录

初始化好的文件夹，只有最基础的目录，我们的各种功能模块不可能都放到一个文件夹下边，显得很乱。所以需要根据不同的功能模块创建一些文件夹。将每个功能都放到对应的模块下边。

1643100216(1).png

当然，目录怎么建都是可以的哈。我这边是我个人的理解。

vue-router的配置

最简单的配置：在router文件夹下创建index.js和routes.js文件

routes.js用来存放路由。导入views中的页面，填写一些基本信息。

import Index from '../views/index'
import ECharts from '../views/echarts'

const routers = [
  {
    path: '/',
    component: Index,
    name: 'index'
  },
  {
    path: '/eCharts',
    name: 'echarts图',
    component: ECharts
  },
]

export default routers

index.js用来写一些路由的配置、路由守卫等。

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'

const router = new VueRouter({
  mode: 'hash',
  routes,
})

Vue.use(VueRouter)

export default router

然后找一个页或者组件配置好router-link和router-view

我这里为了简单明确，先app.vue中写，后续会换到menu或者nav组件中去。循环router/routes中写好的的路由页面。点击对应的router-link就会在router-view处显示，你的路由页面了。

<template>
  <div id="app">
    <template v-for="item in routes">
      <router-link :key="item.name" :to="item.path">
        {{ item.name }}
      </router-link>
    </template>
    <router-view></router-view>
  </div>
</template>

<script>
import routes from './router/routes'

export default {
  name: 'App',
  components: {},
  data() {
    return {
      routes: routes,
    }
  },
  methods: {},
}
</script>

<style></style>

这样，最简单的路由配置就完成了。

接下来会补拦截器、vuex的封装、组件的编写、以及一些vue-cli的配置。如果有其他的需要可以留言。

前端新手如何学习vue——看这篇就够了

前言