vue学习总结

Vue概念

一套构建用户界面的渐进式框架

只关注视图层，采用自底向上的增量开发的设计。

通过尽可能简单的API实现响应的数据绑定和组合的视图组件。

Vue项目结构

1. Build：项目构建相关代码
2. Config：配置目录，包含端口号
3. Node_mudules:npm加载的项目依赖模块
4. Src：需开发的目录（assets：放置图片logo，components：目录放一些组件文件，app.vue：项目文件入口，main.js：项目核心文件）
5. Static：静态资源目录
6. Test：初始化测试目录
7. Package.json：项目配置文件

APP.vue文件结构

<template></ template>:---------------->模板展示

<script></ script>:---------------->主体内容

<style></ style>:---------------->样式代码

使用idea创建vue项目流程

安装node.js

下载地址：Node.jsNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.https://nodejs.org/zh-cn/

1. 显示node版本号

DOS命令行:win+r

node -v

 

1. 显示npm版本号

Npm -v

​​​​​​​ 

1. 安装镜像

使用npm之间安装vue_cli，访问国外，速度慢

安装淘宝镜像：

DOS命令行：win+r

运行：npm config registry http://registry.npm.taobao.org

npm install –g vue_cli

1. 显示vue版本号

vue –v

 

1. 开始创建项目

Vue init webpack projetname（工程名）

按照下一步操作。

运行项目

Cd 文件名------>进入文件路径

Npm run Dev------>运行项目