200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > Vue安装教程(保姆级详细教程)

Vue安装教程(保姆级详细教程)

时间:2023-01-02 00:43:52

相关推荐

Vue安装教程(保姆级详细教程)

1.首先安装node.js

下载 | Node.js 中文网 ()/download/

根据自己的电脑选择对应的版本

这里安装的是

双击打开,一直下一步直接进行安装

Node.js runtime 表示运行环境

npm package manager表示npm包管理器

online documentation shortcuts 在线文档快捷方式

Add to PATH添加到环境变量

点击install安装

安装完成后,.msi格式的安装包已经将node启动程序添加到系统环境变量path中,查看系统变量验证

查看是否安装成功 在 cmd 框中 输入node-v

最新版的node在安装时同时也安装了npm,执行npm -v查看npm版本

和上面一样就是安装成功了

2.配置安装目录和缓存目录

创建默认安装目录和缓存日志目录

比如,我希望将全模块所在路径和缓存路径,放在我node.js安装的文件夹中,则在我安装的文件夹【F:\Program Files\nodejs】下创建两个文件夹【node_global】及【node_cache】分别作为默认安装目录和缓存日志目录。

执行命令,将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录

npm config set prefix "F:\Program Files\nodejs\node_global"npm config set cache "F:\Program Files\nodejs\node_cache"

npm config get prefix查看npm全局安装包保存路径

npm config get cache查看npm装包缓存路径

npm config list查看所有npm 配置

3.node.js环境配置

“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”,进入环境变量对话框

【系统变量】下新建【NODE_PATH】,输入【F:\Program Files\nodejs\node_modules 】

【用户变量】下的【Path】添加上 【F:\Program Files\nodejs\node_cache】【F:\Program Files\nodejs\node_global】,这是nodejs默认的模块调用路径

4.配置淘宝镜像源

第一种:直接修改npm的默认配置

npm config set registry https://registry.

第二种:安装cnpm

npm install -g cnpm --registry=https://registry.

验证方式执行cnpm config get registry 或 cnpm config list

在验证 cnpm 的时候可能会出现'cnpm' 不是内部或外部命令,也不是可运行的程序 的问题

为了将全模块所在路径和缓存路径放在node.js安装的文件夹中,之前安装node.js时建立了两个文件夹

node_global

node_cache

在 F:\Program Files\nodejs\node_global 文件夹里可以找到 cnpm.cmd 的文件,从命令提示符进入F:\Program Files\nodejs\node_global 文件夹

然后可以执行 cnpm -v 成功,说明需要在【系统变量】的 环境变量的 path 中,添加 F:\Program Files\nodejs\node_global 路径。

添加后,重新打开命令提示符,在验证。

5.接下来我们就可以安装安装vue及脚手架

安装vue.js

npm install vue -g或者cnpm install vue -g

根据自己的淘宝镜像源设置选择命令,其中-g是全局安装,指安装到global全局目录去

查看安装的vue信息:npm info vue 或者cnpm info vue

查看安装的vue版本npm list vue

安装webpack模板

在命令行中运行命令 npm install webpack -g ,然后等待安装完成。

webpack 4x以上,webpack将命令相关的内容都放到了webpack-cli,

所以还需要安装webpack-cli:npm install --global webpack-cli,安装成功后可使用webpack -v查看版本号。

安装脚手架vue-cli 2.x

cnpm install –global vue-cli

Downloading vue-cli to C:\Program Files\nodejs\node_modules\vue-cli_tmp

Error: EPERM: operation not permitted, mkdir ‘F:\Program Files\nodejs\node_modules\vue-cli_tmp’

at Error (native)

出现这个原因,主要是C盘写入权限不足,可以用管理员身份运行cmd

然后再次输入安装命令:npm install –gvue-cli 即可安装成功。通过输入vue,如果能出来命名则安装成功

安装上vue-router

npm install -g vue-router

vue-cli2创建vue项目

会很慢

vue init webpack test

使用vue init webpack test创建项目回车时显示

Command vue init requires a global addon to be installed.

Please run yarn global add @vue/cli-init and try again.

解决方法:npm install -g @vue/cli-init

然后创建项目,正常。

Project name(工程名):回车(含大写字母或者中文会报错)

Project description(工程介绍):回车

Author:作者名 :回车

Vue build ==> (是否安装编译器)runtime-compiler、 runtime-only 都是打包方式,第二个效率更高;

Install vue-router ==> 是否要安装 vue-router,项目中肯定要使用到路由,所以Y 回车;

Use ESLint to lint your code ==> 是否需要ESLint检测代码,目前我们不需要所以 n 回车;

Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车;

Setup e2e tests with Nightwatch ==>是否需要端到端测试工具目前我们不需要所以n回车;

Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)==> 安装依赖npm install

回车;

webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

解决:原因是因为你的node_modules有意外改动,导致依赖库不完整。

删除项目下的node_modules,在你的项目目录下,重新执行npm install,这会重新生成node_modules,

执行npm run build ,

npm run dev.

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。