lav filters有什么用_用最笨的方法来学vue(三)

前两篇,我们讲到了vue 的一些简单的语法和概念,接下来我会带大家结合vue 项目的形式去学习更多vue 的相关知识,

首先你要确保你的电脑上已经安装了node.js ,如果还没有的话,请自行到官网进行下载安装,都是很简单的事情,就是傻瓜式的点击安装,另外可能你需要注意的是要配置环境变量,不会的,可以自行百度,很多的教程,在这里我们主要讲,如果利用vue进行项目的开发,所以我假设你会了,并且已经准备好了相关环境.

ok 安装配置好了node 之后呢,这里咱们要保证node 安装的是 > = 8.9 的,然后我们新建一个文件夹,然后用 VScode打开 (这里推荐vscode,好用又方便),打开控制台 快捷键 ctrl + ` 进入到根目录,

首先我们全局安装 vue-cli (这里安装vue-cli3,最新版) 执行命令 npm install -g @vue/cli

等安装完了之后我们验证一下是否安装成功, vue -V 如果成功会显示vue 的版本号

然后执行命令 vue create web-livall 我这里是以web-livall 为项目的名称, 所以如果你要建一个自定义的项目, 你可以vue create your-project

然后 会出现 default (babel,eslint) 和 Manually select features

这是什么意思呢? default 表示的是vue 提供的默认的 配置, 对于初学者,我的建议是选择default 然后一直回车执行下去,

Manually select features 是手动根据自己的爱好习惯来选择配置,这里不建议,所以先跳过,

最后会提示你, Save this as a preset for future projects? (y/N) n 选择no

// 是否在以后的项目中使用以上配置？不

然后等待安装, 完了之后,就可以直接进入项目,让项目在本地跑起来,

cd my-project // 进入到项目根目录

npm run serve // 启动项目

然后你就会在浏览器上看到, 你的项目跑起来了.

点击打开vscode 的文件夹,它会长成类似于这样,

这是vue 创建的最简单的项目结构,接下来我会给大家建议,项目如何分类文件名,这不是固定的写法,但,是更多开发者的共同选择

├── src # 源代码
│ ├── api # 所有请求
│ ├── assets # 主题 字体等静态资源
│ ├── components # 全局公用组件
│ ├── directive # 全局指令
│ ├── filters # 全局 filter
│ ├── icons # 项目所有 svg icons
│ ├── lang # 国际化 language
│ ├── layout # 全局 layout
│ ├── router # 路由
│ ├── store # 全局 store管理
│ ├── styles # 全局样式
│ ├── utils # 全局公用方法
│ ├── vendor # 公用vendor
│ ├── views # views 所有页面
│ ├── App.vue # 入口页面
│ ├── main.js # 入口文件 加载组件 初始化等
├── tests # 测试
├── .eslintrc.js # eslint 配置项
├── vue.config.js # vue-cli 配置
├── postcss.config.js # postcss 配置
// ....

这里并不是全部的分类都是这样, 只是把一些,大家习惯这样写的都放在这里.

还有个人习惯 将组件的名称 用大写字母开头 例如,

---component

|

|--- Button

|

|--index.vue

等等都是一些项目协同开发的一些习惯,有利于别的开发者读懂你的代码,让开发更有效.