Vue学习心得(1)vue的安装

  因为公司要用到Vue来实现项目的需求,所以最近的一段时间都在学习和使用Vue,谈不上多精通,但是基本的业务逻辑都能实现,在我看来技术的学习应该是一个探讨并成长的过程,所以关于vue的学习使用,发表一下在自己的看法,希望大家也能够不吝指教,共同进步。

  大家也都知道,vue是一个轻量级的框架,他和React,AngularJS有很多相似的地方,当然了他们还是有区别的,否则的话那就是一个东西,那么我们也就不需要学了,关于他们的异同点,这里就不在赘述,有兴趣的同学可以去百度了解一下,这个是今天的非重点。

  接下来进行今天的学习重点,其实也不算是重点,因为它很简单,也很容易学会,之所以把它拿出来是因为万丈高楼平地起,这是第一步。

Vue的安装

1. 直接引用

  这种方式其实就像是引用Jqurey一样,简单粗暴,这里是官方地址
  其实网上论坛上很多人都说建议初学者使用这一种方式,因为通过这一种的方式你可以把Vue的知识掌握的更加深刻,更加细致。
  但是我不建议,在我看来使用这一种方式,对你的技能要求非常高,如果你对Vue有了深刻的了解之后,使用这一种方式的确会很好的让你去了解Vue。
  但是作为初学者,我建议还是使用搭建脚手架的方式。这样可以很简单的让你学会使用Vue。

2.使用vue-cli脚手架安装

安装之前检查是否已经安装node环境。如果没有安装,请点击node下载地址。进行下载安装。环境安装好后则进行我们的脚手架安装。

  1. 安装vue-cli : npm install -g vue-cli
  2. 初始化项目:vue init webpack 要创建的项目名,我这里起名叫demo。
    Vue学习心得(1)vue的安装_第1张图片
  3. 然后根据提示选择,我这里只安装了一个vue-router。
    Vue学习心得(1)vue的安装_第2张图片
  4. 这是我们的项目里都有这些文件。
    Vue学习心得(1)vue的安装_第3张图片
    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所以没有这个文件。
  5. cd 切换到项目文件夹,安装依赖:npm install
    Vue学习心得(1)vue的安装_第4张图片
  6. 依赖安装完成后运行:npm run dev
    Vue学习心得(1)vue的安装_第5张图片
    Vue学习心得(1)vue的安装_第6张图片
  7. 到这里vue的脚手架就算是已经搭建完成了,当然了在实际的了开发中,小伙伴们可以根据项目的需求去搭建,这里就不再详细介绍了。

    关于vue的安装就先介绍到这里,欢迎小伙伴指正。

你可能感兴趣的:(Vue学习心得(1)vue的安装)