Vue创建项目步骤

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环境成功;
Vue创建项目步骤

可以使用淘宝镜像提高效率:http://npm.taobao.org/

输入:npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了。
Vue创建项目步骤
检查是否安装成功:
Vue创建项目步骤
二、搭建vue项目环境

1、全局安装vue-vli
npm install –g vue-cli
Vue创建项目步骤

2、进入项目目录,创建一个基于webpack模板的新项目: vue init webpack 项目名
Vue创建项目步骤

3、切换到项目,进入项目 cd 项目名,然后在安装依赖 cnpm install
Vue创建项目步骤
安装成功后,项目文件夹中回多出一个目录 node_modules
Vue创建项目步骤
4、启动项目npm run dev
项目启动成功:
Vue创建项目步骤

vue项目目录详解

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
    Vue创建项目步骤module.exports配置中找到autoOpenBrowswe,默认设置的是false,然后改为true就可以了
    Vue创建项目步骤Ctrl+C,然后我们重启一下,就能自动打开浏览器了
    Vue创建项目步骤

如何使用less写样式

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

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

Vue创建项目步骤

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » Vue创建项目步骤
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏