区块链技术博客
www.b2bchain.cn

Vue创建项目步骤的讲解

这篇文章主要介绍了Vue创建项目步骤的讲解,通过具体代码讲解7139并且分析了Vue创建项目步骤的讲解的详细步骤与相关技巧,需要的朋友可以参考下

本文实例讲述了Vue创建项目步骤的讲解。分享给大家供大家参考文章查询地址https://www.b2bchain.cn/7139.html。具体如下:

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

  1. 打开config ==> index.js
    Vue创建项目步骤
  2. module.exports配置中找到autoOpenBrowswe,默认设置的是false,然后改为true就可以了
    Vue创建项目步骤
  3. Ctrl+C,然后我们重启一下,就能自动打开浏览器了
    Vue创建项目步骤

如何使用less写样式

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

本文地址https://www.b2bchain.cn/7139.html

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » Vue创建项目步骤的讲解
分享到: 更多 (0)

评论 抢沙发

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

b2b链

联系我们联系我们