vue 框架使用
vue 简介
MVVM 的介绍
vue 项目步骤
vue 项目目录详解
运行 vue 可以自动打开浏览器
如何使用 Less 写样式
vue 简介
Vue 是一套用于构建用户界面的渐进式框架. 与其它大型框架不同的是, Vue 被设计为可以自底向上逐层应用. Vue 的核心库只关注视图层, 于与第三方库或既有项目整合. 另一方面, 当与现代化的工具链以及各种支持类库结合使用时, Vue 也完全能够为复杂的单页应用提供驱动.
MVVM 的介绍
MVVM, 一种更好的 UI 模式解决方案;
MVC
M: Model 数据模型 (专门用来操作数据, 数据的 CRUD)
V:View 视图 (对于前端来说, 就是页面)
C:Controller 控制器 (是视图和数据模型沟通的桥梁, 用于处理业务逻辑)
MVVM 组成
MVVM ===> M / V / VM
M:model 数据模型
V:view 视图
VM:ViewModel 视图模型
vue 项目步骤
一, 安装 node 环境
下载地址: https://nodejs.org/en/
检查是否安装成功; 如果能够成功输出版本号, 就说明我们安装 node 环境成功;
可以使用淘宝镜像提高效率: http://npm.taobao.org/
输入: NPM install -g cnpm -registry=https://registry.npm.taobao.org, 即可安装 NPM 镜像, 以后再用到 NPM 的地方直接用 cnpm 来代替就好了.
检查是否安装成功:
二, 搭建 vue 项目环境
1, 全局安装 vue-vli
NPM install --g vue-cli
2, 进入项目目录, 创建一个基于 webpack 模板的新项目: vue init webpack 项目名
3, 切换到项目, 进入项目 cd 项目名, 然后在安装依赖 cnpm install
安装成功后, 项目文件夹中回多出一个目录 node_modules
4, 启动项目 NPM run dev
项目启动成功:
vue 项目目录详解
build: 构建脚本目录
1)build.JS ==> 生产环境构建脚本;
2)check-versions.JS ==> 检查 NPM,node.JS 版本;
3)utils.JS ==> 构建相关工具方法;
4)vue-loader.conf.JS ==> 配置了 CSS 加载器以及编译 CSS 之后自动添加前缀;
5)webpack.base.conf.JS ==> webpack 基本配置;
6)webpack.dev.conf.JS ==> webpack 开发环境配置;
7)webpack.prod.conf.JS ==> webpack 生产环境配置;
-config: 项目配置
1)dev.env.JS ==> 开发环境变量;
2)index.JS ==> 项目配置文件;
3)prod.env.JS ==> 生产环境变量;
node_modules:NPM 加载的项目依赖模块
src: 这里是我们要开发的目录, 基本上要做的事情都在这个目录里. 里面包含了几个目录及文件:
1)assets: 资源目录, 放置一些图片或者公共 JS, 公共 CSS. 这里的资源会被 webpack 构建;
2)components: 组件目录, 我们写的组件就放在这个目录里面;
3)router: 前端路由, 我们需要配置的路由路径写在 index.JS 里面;
4)App.vue: 根组件;
5)main.JS: 入口 JS 文件;
static: 静态资源目录, 如图片, 字体等. 不会被 webpack 构建
index.html: 首页入口文件, 可以添加一些 meta 信息等;
package.JSON:NPM 包配置文件, 定义了项目的 NPM 脚本, 依赖包等信息
README.md: 项目的说明文档, Markdown 格式
.xxxx 文件: 这些是一些配置文件, 包括语法配置, Git 配置等;
运行 vue 可以自动打开浏览器
解决 vue 不能自动打开浏览器的问题: 当我们启动项目 NPM run dev , 开始运行
, 命令行提示我们运行成功, 但是浏览器没有打开, 只能自己手动输入
解决:
打开 config ==> index.JS
module.exports 配置中找到 autoOpenBrowswe, 默认设置的是 false, 然后改为 true 就可以了
Ctrl+C, 然后我们重启一下, 就能自动打开浏览器了
如何使用 Less 写样式
1, 先安装 Less 依赖: **NPM install Less Less-loader --save **
2, 安装成功后, 可以在 package.JSON 里面看到, 多增加了两个模块;
3, 然后在 vue 文件里面编写样式:
写的不好或有错误的地方, 接受请教~!
来源: https://blog.csdn.net/cedricdx/article/details/101195635