Vue学习心得(1)vue的安装
2017-04-15 22:57
302 查看
因为公司要用到Vue来实现项目的需求,所以最近的一段时间都在学习和使用Vue,谈不上多精通,但是基本的业务逻辑都能实现,在我看来技术的学习应该是一个探讨并成长的过程,所以关于vue的学习使用,发表一下在自己的看法,希望大家也能够不吝指教,共同进步。
大家也都知道,vue是一个轻量级的框架,他和React,AngularJS有很多相似的地方,当然了他们还是有区别的,否则的话那就是一个东西,那么我们也就不需要学了,关于他们的异同点,这里就不在赘述,有兴趣的同学可以去百度了解一下,这个是今天的非重点。
接下来进行今天的学习重点,其实也不算是重点,因为它很简单,也很容易学会,之所以把它拿出来是因为万丈高楼平地起,这是第一步。
其实网上论坛上很多人都说建议初学者使用这一种方式,因为通过这一种的方式你可以把Vue的知识掌握的更加深刻,更加细致。
但是我不建议,在我看来使用这一种方式,对你的技能要求非常高,如果你对Vue有了深刻的了解之后,使用这一种方式的确会很好的让你去了解Vue。
但是作为初学者,我建议还是使用搭建脚手架的方式。这样可以很简单的让你学会使用Vue。
安装vue-cli : npm install -g vue-cli
初始化项目:vue init webpack 要创建的项目名,我这里起名叫demo。
![](https://img-blog.csdn.net/20170415220757016?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcTc0NzYzNjk2OQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
然后根据提示选择,我这里只安装了一个vue-router。
![](https://img-blog.csdn.net/20170415223058956?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcTc0NzYzNjk2OQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
这是我们的项目里都有这些文件。
![](https://img-blog.csdn.net/20170415223343676?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcTc0NzYzNjk2OQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
build:webpack配置相关的文件。
node_modules:npm install 安装的文件
src:存放项目代码
.babelrc:babel配置文件,把我们ES2105的代码通过它编译成ES5的。
.editorconfig:编辑器配置
.eslintignore:忽略语法检查的目录文件配置
.gitignore:配置Git仓库的忽略
index.html:项目入口模板文件
package.json:node配置文件
如果安装eslint的话还会有一个.eslintrc.js,这个是eslint的配置文件,我这里没有安装eslint所以没有这个文件。
cd 切换到项目文件夹,安装依赖:npm install
![](https://img-blog.csdn.net/20170415224840541?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcTc0NzYzNjk2OQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
依赖安装完成后运行:npm run dev
![](https://img-blog.csdn.net/20170415225403752?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcTc0NzYzNjk2OQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![](https://img-blog.csdn.net/20170415225517332?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcTc0NzYzNjk2OQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
到这里vue的脚手架就算是已经搭建完成了,当然了在实际的了开发中,小伙伴们可以根据项目的需求去搭建,这里就不再详细介绍了。
大家也都知道,vue是一个轻量级的框架,他和React,AngularJS有很多相似的地方,当然了他们还是有区别的,否则的话那就是一个东西,那么我们也就不需要学了,关于他们的异同点,这里就不在赘述,有兴趣的同学可以去百度了解一下,这个是今天的非重点。
接下来进行今天的学习重点,其实也不算是重点,因为它很简单,也很容易学会,之所以把它拿出来是因为万丈高楼平地起,这是第一步。
Vue的安装
1. 直接引用
这种方式其实就像是引用Jqurey一样,简单粗暴,这里是官方地址其实网上论坛上很多人都说建议初学者使用这一种方式,因为通过这一种的方式你可以把Vue的知识掌握的更加深刻,更加细致。
但是我不建议,在我看来使用这一种方式,对你的技能要求非常高,如果你对Vue有了深刻的了解之后,使用这一种方式的确会很好的让你去了解Vue。
但是作为初学者,我建议还是使用搭建脚手架的方式。这样可以很简单的让你学会使用Vue。
2.使用vue-cli脚手架安装
安装之前检查是否已经安装node环境。如果没有安装,请点击node下载地址。进行下载安装。环境安装好后则进行我们的脚手架安装。安装vue-cli : npm install -g vue-cli
初始化项目:vue init webpack 要创建的项目名,我这里起名叫demo。
然后根据提示选择,我这里只安装了一个vue-router。
这是我们的项目里都有这些文件。
build:webpack配置相关的文件。
node_modules:npm install 安装的文件
src:存放项目代码
.babelrc:babel配置文件,把我们ES2105的代码通过它编译成ES5的。
.editorconfig:编辑器配置
.eslintignore:忽略语法检查的目录文件配置
.gitignore:配置Git仓库的忽略
index.html:项目入口模板文件
package.json:node配置文件
如果安装eslint的话还会有一个.eslintrc.js,这个是eslint的配置文件,我这里没有安装eslint所以没有这个文件。
cd 切换到项目文件夹,安装依赖:npm install
依赖安装完成后运行:npm run dev
到这里vue的脚手架就算是已经搭建完成了,当然了在实际的了开发中,小伙伴们可以根据项目的需求去搭建,这里就不再详细介绍了。
关于vue的安装就先介绍到这里,欢迎小伙伴指正。
相关文章推荐
- OGRE学习心得——安装
- “ubunt Server最佳方案”个人学习笔记之安装心得
- vue 2.0学习心得
- Vue学习之路---No.2(分享心得,欢迎批评指正)
- Vue学习之路---No.3(分享心得,欢迎批评指正)
- WinXP下安装 Apache +PHP5 + MySQL + phpMyAdmin学习心得
- Vue学习之路---No.2(分享心得,欢迎批评指正)
- vue.js学习笔记(一)安装及项目的创建和运行
- Qt学习心得-FFTW3在Qt5.7下的安装
- Vue学习之路---No.4(分享心得,欢迎批评指正)
- Apache + PHP + PEAR 安装配置 + Memcache 简单学习心得
- redis学习心得 -- windows 下安装 redis
- redis学习心得之一【安装redis初体验】
- redis学习心得之一【安装redis初体验】
- mysql学习心得之二进制安装(4)
- Drqueue学习心得(一) 编译及安装
- OGRE学习心得——安装
- Linux【学习心得】深入剖析软件的源码安装
- 学习vue.js心得
- Vue学习之路---No.5(分享心得,欢迎批评指正)