前端新手如何学习vue |
您所在的位置：网站首页 › js基础难吗 › 前端新手如何学习vue |
前端新手如何学习vue
|
前言
当你开始想要学习vue等框架的时候，那么就意味着或多或少，你都会一些前端的基本功了。 但是我发现，一些前端新手朋友，学习vue的时候，就是硬看视频、硬看文档，完全没有把视频和文档讲述的内容结合到项目中去练习，我个人感觉这种方式，可能看的时候知道是什么东西，但是看完就会忘记，对于个人学习，不是一个好的方法。 那么本篇文档就带着新手朋友们一起学习vue吧。（文章过于小白、不适合高手，仅供前端新手学习使用，不喜可喷） 基本环境配置现在挺火的vite2： vitejs.cn/ 我们使用Vue-cli： cli.vuejs.org/zh/ 先安装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执行完你会看到这个界面
是不是贼简单。 构建目录初始化好的文件夹，只有最基础的目录，我们的各种功能模块不可能都放到一个文件夹下边，显得很乱。 所以需要根据不同的功能模块创建一些文件夹。将每个功能都放到对应的模块下边。 当然，目录怎么建都是可以的哈。我这边是我个人的理解。 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 routersindex.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处显示，你的路由页面了。 {{ item.name }} import routes from './router/routes' export default { name: 'App', components: {}, data() { return { routes: routes, } }, methods: {}, }这样，最简单的路由配置就完成了。 接下来会补拦截器、vuex的封装、组件的编写、以及一些vue-cli的配置。如果有其他的需要可以留言。 |
【本文地址】