前端新手如何学习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的配置。如果有其他的需要可以留言。 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |