最新消息: PyCharm vs VSCode,哪个更好?
您现在的位置是:群英 > 服务器 > 系统运维 >
Vue项目创建难不难?有什么要留意?
CSDN发表于 2020-10-12 17:44 次浏览

本文主要给大家分享了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文件里面编写样式:

写的不好或有错误的地方,接受请教~!

标签:创建vue项目
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
相关信息推荐