搭建一个vue项目、vue项目各配置文件作用和个人vue项目开发总结

搭建一个vue项目、vue项目各配置文件作用和个人vue项目开发总结

流程如下：
一.安装node.js

1).在node.js 官网中下载安装包

2).打开下载完的NodeJs文件

3).在文件目录下建立”node_global“及”node_cache“两个文件夹

4).打开cmd，输入：
F:\文件所在路径\node_global
F:\文件所在路径\node_global

5).完成之后输入：npm root -g 查看是否安装成功

二.配置环境变量

1).打开“此电脑”—“属性”—“高级系统设置”—“环境变量”

2).复制nodejs目录路径,然后选中用户变量中的Path,单击’编辑’—’新建’，输入复制的地址

3).打开cmd，输入：node -v  检查是否配置成功

三.安装vue-cli脚手架，vue-cli可以快速构建Vue项目

1).打开cmd，输入：npm install -g vue-cli

2). vscode打开创建的文件夹，在终端中输入：vue init webpack （初始化Vue-Cli的项目的目录）

3).安装结束后继续输入：npm install / npm i 安装依赖

4).最后输入：npm run dev，启动项目

注：

build webpack文件，配置参数,打包的代码存放在这里。

config          vue项目的基本配置文件

node_modules 项目中安装的依赖模块

src 源代码文件夹

api                  放置与后台 api 相关的文件

assets         放置静态资源，包括公共的 css 文件、 js 文件、iconfont 字体文件、img 图片文件 以及其他资源类件。

pages            放置主要页面的组件。

router               放置路由设置文件，指定路由对应的组件

components          放置通用模块组件

image         放置图片

store                 放置 vuex 需要的状态关联文件

style                  项目统一样式文件

unit                   项目公用的js文件

App.vue              App.vue组件，项目入口文件

main.js               项目的核心入口js文件

static 静态资源目录，如图片、字体等

.babelrc                 babel编译参数，vue开发需要babel编译

.editorconfig              代码编辑环境配置文件

.gitignore                  git提忽略文件

.postcssrc.js              css配置文件,自动补齐浏览器css前缀

index.html               主页，项目入口文件

package.json           记录你项目中所需要的所有模块

package-lock.json           锁定所有模块的版本号(包括主模块和所有依赖子模块)

README.md            项目的说明文档

总结：

vue项目结构避免了代码重复，通过组件将页面拆分成一个个组件，在所需要的模块中引用组件或者传入参数就可以了。其次，实现数据与结构的分离 高效轻便，双向数据绑定。
1. vue中常用的指令：
v-if：判断是否隐藏；
v-for：数据循环出来；
v-bind:class：绑定一个属性；
v-model：实现数据双向绑定；
v-show: 实现元素的显示和隐藏(只改变元素css属性) ；
v-text：插入文本；
v-html：插入HMTL；

2.子传父


首先，在子组件中写传值时的事件，在data中定义需要传到组件的值
将需要传的值作为$emit的第二个参数，传给上步中自定义事件的方法

在父组件中绑定自定义事件并监听获取值

3.父传子

子组件在props中创建一个属性，用以接收父组件传过来的值

在子组件需要绑值的标签中添加子组件在props中创建的属性


在父组件中把需要传给子组件的值赋给该属性

4. 动态绑定class
1.绑定单个class


current:变量

action:css名

2.绑定多个class，需要逗号隔开 (同理)
3.绑定的数据对象

4.三元运算符判断


5. watch用法
watch的作用可以监控一个值的变化，并调用因为变化需要执行的方法。


6.路由传值
1.通过路由带参数传值

2. router-link标签传值