vue框架搭建步骤详解

首先,安装node.js

各种版本的node.js:https://nodejs.org/en/download/releases/

解释:

      百度百科:Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,即JavaScript的运行环境

      举一反三:JDK(包括JRE)或JRE是java的运行环境,我们想要运行java程序首先需要有java的运行环境。

      说明:新版的Node.js集成了npm,安装Node.js时会一起安装,直接npm -v命令,直接显示npm版本信息。npm的作用就是对Node.js依赖的包进行管理,也可以理解为用来安装/卸载Node.js需要装的东西

      问题:

      1.为什么我们需要一个包管理工具呢?

            因为我们在Node.js上开发时,会用到很多别人写的JavaScript代码。如果我们要使用别人写的某个包,每次都根据名称搜索一下官方网站,下载代码,解压,再使用,非常繁琐。于是一个集中管理的工具应运而生:大家都把自己开发的模块打包后放到npm官网上,如果要使用,直接通过npm安装就可以直接用,不用考虑代码存在哪,应该从哪下载。

      2.npm? cnpm?

            npm安装插件的时候是从国外服务器下载,受网络影响大,有些npm资源被屏蔽或者是国外资源的原因,经常会导致npm安装依赖包的时候失败

            cnpm淘宝团队做的国内镜像,因为npm的服务器位于国外可能会影响安装。

            安装cnpm命令:

npm install -g cnpm --registry=http://registry.npm.taobao.org

第二步,全局安装vue-cli

vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目

命令:cnpm install -g @vue/cli

1.可以通过命令查看你以前有没有安装过vue-cli

vue -V
//或者
vue -version

如果你电脑以前没安装过vue-cli,他会提示你XXX不是可识别的命令;反之,如果你的电脑以前安装过,他会查询出版本号

2.如过你之前已经安装过其他版本的vue-cli,你想安装新版本或者你指定版本的vu-cli,你需要通过命令卸载之前的,命令:

//卸载3.0之前的版本
npm uninstall -g vue-cli
//卸载3.0之后的版本(可以统一使用此指令卸载)
npm uninstall -g @vue/cli

3.如果你想要安装指定版本的vue-cli

//安装3.0以下版本,-g表示全局安装
npm install -g vue-cli
//安装3.0以下指定版本
npm install -g vue-cli@版本号

//安装3.0以上版本
npm install -g @vue/cli
//安装3.0以上指定版本
npm install -g @vue/cli@版本号

4.安装了vue-cli后会默认帮我们安装最新版本的vue,我们可以通过npm list vue命令查看默认安装的vue版本。如果我们不想要此版本的vue,我们可以另外安装我们指定版本的vue

npm install vue -g@版本号

第三步,搭建vue项目

      新建文件夹存放此前端项目,并cmd输入:

cnpm install -g @vue/cli-init

      新建 vue 项目:

//vue-cli2.x的初始化方式,可以使用githab上面的一些模板来初始化项目,webpack是官方推荐的标准模板名
vue init webpack 项目名称
//vue-cli3.x的初始化方式,目前模板是固定的,模板选项可自由配置
vue create 项目名称

      按照提示回答即完成vue框架搭建

   

    原文作者:灵活的小胖zhi
    原文地址: https://blog.csdn.net/hejingfang123/article/details/109534932
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞