vue学习笔记(1)——创建项目

2019-02-06  本文已影响69人  小奚有话说

github
vue学习笔记(2)主要介绍项目的基本设置,如axios设置和项目颜色控制
vue学习笔记(3)主要介绍vue的router简单用法
vue是一个前端框架,通过将html中的各种dom渲染成vue自己的虚拟dom,然后通过虚拟dom进行数据双向绑定完成数据的渲染。这样在编写页面的时候大大提高了编写效率,并且学习曲线比较平缓,对h5有基础的认识就可以进行相应的开发了。
vue的项目创建可以基于脚手架进行相关的设置,集成webpack很方便的进行vue项目的打包,这样打包后的文件可以直接进行nginx或者web服务器工具,很方便的进行配置。

vue优点

1、数据双向绑定
2、学习成本低,学习曲线平缓
3、前后端分离

vue项目创建

一、安装npm,vue,vue-cli
在vue构建的时候一般使用npm安装,也可以使用cnpm,
去nodejs官网去下载对应的安装包即可安装node,而npm是继承在nodejs的包管理工具。同时就安装了npm,这一步大家就自己探索吧。
然后下一步就要装,vue和vue-cli了

npm install vue
npm install @vue/cli
#全局安装
npm install -g vue
npm install -g @vue/cli

#脚手架2.x版本
npm install -g vue-cli

脚手架有两个版本,一个是2.x版本,一个是3.0版本,我建议使用3.0版本,其有更强大的图形管理界面和更简单的配置,可以通过使用新增文件的方式进行配置。

二、使用vue-cli创建项目
在需要创建项目的文件夹里

vue create hello-world #项目名称

然后会出现配置命令行,这个时候可以根据提示进行项目的配置,新学者可以使用default进行默认创建项目,然后通过创建好的项目结构,了解一下每一个目录文件的具体用处。然后再通过自定义配置创建不同的项目,来查看每一个配置对于初始项目添加的是哪些内容,来进行整体项目的了解。

自定义配置是配置项目中需要使用到的插件进行配置,主要是babel,使用的js还是ts,是否使用pwa(一般h5项目不需要),router,vuex,css预加载器,代码检查,单元测试,e2e测试这几项内容进行配置。一般的话可以勾选babel,router,vuex(看项目中是否会用到状态管理),代码检查等,按需勾选。

配置好了后就可以进入项目中进行项目结构的了解了。


demo项目文件目录

项目结构非常简单,主要有三个文件夹:

基本上vue项目创建就先介绍到这里了,如果对于vue语法有不了解的可以去vue官网了解一下

加油吧,快去创建自己的vue项目吧!

上一篇 下一篇

猜你喜欢

热点阅读