Vue创建项目步骤

vue 专栏收录该内容
10 篇文章 0 订阅

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文件里面编写样式:
在这里插入图片描述
写的不好或有错误的地方,接受请教~!

<div> 适用人群 <p> Java开发人员,Vue开发人员,前后端分离开发人员,权限管理和配置开发人员 </p> </div> <div> 课程概述 <div style="color:#666666;"> 【讲师介绍】<br /> 讲师职称:<br />               现某知名大型互联网公司资深架构师,技术总监,职业规划师,首席面试官,曾在某上市培训机构,高校任教多年。<br />             Array(Array老师)10多年互联网公司实战经验,知名的大型互联网公司的架构师,高管等职,在企业长期从事于技术的源码阅读和新技术的研究;擅长于职业规划,面试辅导,从事面试官多年;擅长于JAVA,人工智能AI应用,Xmind等等,曾服役于国内某上市培训机构数年,独特的培训思路,培训体系,培训方式,实践的职场技能,职场现状,职场晋升等让你快速适应企业职场的所需。 <br /> 【课程介绍】<br /> 技术选型<br /> 开发环境:Eclipse/Idea ,JDK 1.8以上 <br /> 后端技术<br /> 核心框架:SpringBoot2.x框架系列(同样适用Springcloud F版本以后的版本),如下(节选):    <br /> 持久层框架:MyBatis 3.x + Mybatis-plus 3.x<br /> 日志管理:SLF4J 1.7 + Log4j2 2.7<br /> 工具类:Apache Commons、Jackson 、fastjson、Gson<br /> 权限验证<br /> 前端技术  <br /> Vue  <br /> Vue-cli<br /> ElementUI ---https://element.eleme.io/<br /> JSX (JavaScript Xml)<br /> 前台的权限验证和路由设置<br /> 开发模式  <br />      前后端分离的开发<br /> 数据库 <br />       Mysql5<br /> IDE<br />     Intellij Idea </div> </div>
相关推荐
<p><span style="color: #666666;"><span style="font-size: 14px;">本课程讲了Vue3+Vue2入门基础与实战,其中还重点讲解了ES6、TypeScript这些基础知识,实战是</span></span><span style="color: #666666;"><span style="font-size: 14px;">价值5000元的真实企业级项目---仿京东电商网站,同时项目代码全部赠送</span></span><span style="color: #666666;"><span style="font-size: 14px;">,还赠送前后端架构模板,工作中直接使用。</span></span></p> <p> </p> <p><span style="color: #666666; font-size: 14px; background-color: #ffffff;">VUE是目前热门的前端框架之一,就业薪资很高,本课程教您如何快速学会VUE并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习VUE高薪就业的你来说,那么这门课程便是你手中的葵花宝典。</span><br /><br /><span style="color: #666666; font-size: 14px; background-color: #ffffff;">学习技巧:学习当中不要只看,一定要多敲代码,如果碰到某一个知识点不是很明白,不要钻牛角尖,千万不要因为一个点,放弃整个森林,接着往下学,硬着头皮开发项目只要能亲自开发一个完整的项目,你会发现不明白的地方自然而然就明白了,项目做出来就真正的学会了。</span><br /><br /><span style="color: #666666; font-size: 14px; background-color: #ffffff;">此vue课程以面试和实战为基础进行讲解,每个知识点都会让你知道在实际项目开发中如何使用,学习后,可以开发大型项目,增强逻辑思维,至少让你拥有3年以上开发经验的实力!</span><br /><br /><span style="color: #666666; font-size: 14px; background-color: #ffffff;">代码和ppt均可下载!</span><br /><br /></p> <p><span style="color: #666666; font-size: 14px; background-color: #ffffff;">免费提供《企业级完整实战项目接口文档》,绝对可用。</span></p> <p><img src="https://img-bss.csdn.net/202001090736032736.png" alt="" /><img src="https://img-bss.csdn.net/202001090736166806.png" alt="" /><img src="https://img-bss.csdn.net/202001090736273968.png" alt="" /></p> <p> </p> <p> </p>
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值