Vue创建项目步骤

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 ,开始运行
,命令行提示我们运行成功,但是浏览器没有打开,只能自己手动输入
解决:

  1. 打开config ==> index.js
    在这里插入图片描述
  2. module.exports配置中找到autoOpenBrowswe,默认设置的是false,然后改为true就可以了
    在这里插入图片描述
  3. Ctrl+C,然后我们重启一下,就能自动打开浏览器了
    在这里插入图片描述

如何使用less写样式

1、先安装less依赖: **npm install less less-loader --save **
在这里插入图片描述
2、安装成功后,可以在package.json里面看到,多增加了两个模块;
在这里插入图片描述
3、然后在vue文件里面编写样式:
在这里插入图片描述
写的不好或有错误的地方,接受请教~!

  • 29
    点赞
  • 191
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值