vue框架搭建步骤详解

喜欢ヅ旅行 2022-12-19 09:21 157阅读 0赞

首先，安装node.js

各种版本的node.js:[https://nodejs.org/en/download/releases/][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框架搭建

[https_nodejs.org_en_download_releases]: https://nodejs.org/en/download/releases/
[JavaScript]: https://baike.baidu.com/item/JavaScript/321142