vue.js --- 安装

首先,介绍一下Vue.js的概念,它是什么?一定要配置vue的运行环境吗?

Vue.js不是个全能的框架,因为它的作用只聚焦在视图层。

可以理解为他是一个库,是一个提供尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue.js 可以直接在html里引用,也就是说直接引入他的js文档,就可以在HTML文件中添加vue.js指令了,,在开发过程中,建议安装vue.js进行开发。

那既然如此简单就可以完事,我们所谓的运行环境配置又是怎么回事呢?

是这样的,使用npm引入是方便 包管理 。如果是初学者,只为练习vue的使用,那您大可不必配置环境,因为只要导入js就足够了。但是,如果是以后要用到vue做项目的话,配置环境是必须的。当项目与后台链接在一起时,需要导入的文件会很多,你总不能用到啥就导入啥吧!这时就要用到 Node.js前端自动化的概念了。简单的说就是,把你用到的东西打包导入,我们只需要了解如何使用,其他的让系统来做,让前端开发更爽。

安装Node.js(JavaScript运行环境):

    首先,下载 Node.js,请点击 下载Node ,这里根据你需要的配置下载即可,一般我们windows系统下载 Windows Installer (.msi)64位的就好。
        下载完毕后,会有这样的一个图标点击安装,然后没有什么要特别注意的,直接下一步就可以,但是要知道你安装的路径,养成良好的习惯。(PS:安装过程阅览 node.js 下载及安装:)

      安装完以后,打开命令行(Windows+R)快捷键打开cmd窗口,输入  node -v  ,如果出现版本号,那就安装成功!

安装vue.js:

node.js自带npm,所以node.js安装完成后,不需要再安装npm;输入命令【npm -v】,可查看当前npm的版本
因为 NPM 服务器在国外,安装速度慢,所以都使用淘宝的镜像。注意,此步骤需要网络,请保持保持网络通畅。


        1>>>>  打开cmd命令框,输入  npm install -g cnpm –registry=https://registry.npm.taobao.org    

            注意,安装镜像的时候会有大约1-2分钟的事件,而且要保持网络通畅,要耐心等待。


        2>>>>> 然后在命令框输入   cnpm install vue ,这也需要一点点的时间,当出现下图表示安装成功了。

            如果这两步没有异常就是整个vue的环境搭建成功了,如果不成功,请重复上述操作。

 那么,到底如何从零开始搭建vue环境及项目?

      1.安装 nodejs
        安装包进行安装即可。

      2.安装 vue.js

      3.安装 webpack

      3.安装 npm
        在 cmd 中直接安装npm.若安装慢,可以使用淘宝镜像输入:npm install -g cnpm -registry=http://registry.npm.taobao.org,即可安装 npm 镜像,以后再用到 npm 的地方直接用 cnpm 来代替就好了。

      4.安装全局 vue-cli 脚手架

         4.1、vue-cli 作用:作为vue的脚手架,可以帮助我们在实际开发中自动生成vue.js的模板工程。
         4.2、vue-cli 使用:!!前提需要vue和webpack


         cnpm install -g vue-cli 回车即可。

        之所以要用vue-cli,是因为这个工具能帮我们搭建好我们需要的模版框架,比较简单。验证安装是否成功,输入vue,出来vue的信息说明安装成功。

      5.创建新项目
        安装完脚手架,开始创建一个新项目:vue init webpack vue_project(最后这个是我创建的项目文件夹的名字)

      6.进入项目
        cd vue_project (我的项目)

      7.安装项目依赖
        npm install (安装依赖node_modules最好用npm install,cnpm会缺失很多依赖)

      8.npm run dev
        本地 安装加载的项目依赖模块并运行。

发布了66 篇原创文章 · 获赞 13 · 访问量 9万+

猜你喜欢

转载自blog.csdn.net/weixin_42220533/article/details/90063208