vue 项目全局安装yarn 全局安装@vue/cli

转载

jimoshalengzhou 2024-08-20 12:42:55

文章标签 vue 项目全局安装yarn vue nodejs 缓存 Vue 文章分类 Yarn 大数据

搭建vue开发环境。

vue 项目全局安装yarn 全局安装@vue/cli_vue 项目全局安装yarn

安装过程：下一步路径：（我的D:\Develop\nodejs）下一步就好

vue 项目全局安装yarn 全局安装@vue/cli_vue 项目全局安装yarn_02

安装好之后，对npm安装的全局模块所在路径以及缓存所在路径，进行环境配置。是因为以后在执行类似：npm install express [-g]（后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，占C盘空间。
例如：我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中，则在我安装的文件夹【D:\Develop\nodejs】下创建两个文件夹【node_global】及【node_cache】
打开cmd输入如下命令

npm config set prefix "D:\Develop\nodejs\node_global"
npm config set cache "D:\Develop\nodejs\node_cache"

vue 项目全局安装yarn 全局安装@vue/cli_Vue_03

接下来点击我的电脑，属性，高级系统设置

vue 项目全局安装yarn 全局安装@vue/cli_vue_04

vue 项目全局安装yarn 全局安装@vue/cli_Vue_05

1.新建系统变量

输入NODE_PATH
输入D:\Develop\nodejs;D:\Develop\nodejs\node_global\node_modules    （node安装地址跟自定义地址 用;分开）

2.修改用户变量path

%NODE_PATH%;D:\Develop\nodejs\node_global   (加%NODE_PATH%是为了防止 cmd找不到node报错）

然后保存，对....

3、基于nodejs，利用淘宝npm镜像安装相关依赖。

由于国内使用npm会很慢，这里推荐使用淘宝nmp镜像打开cmd

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

vue 项目全局安装yarn 全局安装@vue/cli_Vue_06

完成之后，我们就可以使用cnpm代替npm来安装依赖包了。

到这里测试下node cnpm有没有问题： node -v cnpm -v

vue 项目全局安装yarn 全局安装@vue/cli_vue_07

ps:解决cnpm不是外部命令：

之前安装npm的时候，配置过node_modules和node_cache。所以去nodejs的目录下去找cnpm装哪个文件夹去了。

我的是D:\software\nodeJS\node_cache

vue 项目全局安装yarn 全局安装@vue/cli_vue_08

本文件夹下打开cmd 运行cnpm -v

vue 项目全局安装yarn 全局安装@vue/cli_Vue_09

ok，现在去配置系统环境path，把cnpm安装路径加入path里，如下图。

vue 项目全局安装yarn 全局安装@vue/cli_缓存_10

ok到这里问题就解决了，可以直接win+r打开cmd 跑下cnpm -v ，楼主是没有问题的。

4、为什么安装vue-cli脚手架---为了生成vue工程模板

安装全局vue-cli脚手架，用于帮助搭建所需要的模板框架输入 cnpm install -g vue-cli

vue 项目全局安装yarn 全局安装@vue/cli_vue 项目全局安装yarn_11

安装完成之后
输入vue测试一下

vue 项目全局安装yarn 全局安装@vue/cli_Vue_12

出现了vue信息说明表示成功
用vue-cli构建项目

查看vue版本vue -V 这个V是大写的不让会报错

5.打包工具webpack 中文网址：https://www.webpackjs.com/ 最近也在研究这东西感觉逼格很高

6.创建项目

（1）本地创建目录

vue 项目全局安装yarn 全局安装@vue/cli_缓存_13

（2）cmd 打开本地，目录E盘下www里的fristvue 注：正确的命令格式是：cd/d E:\www\firstvue

vue 项目全局安装yarn 全局安装@vue/cli_vue_14

下面这张图是默认地址的截图：

vue 项目全局安装yarn 全局安装@vue/cli_缓存_15

? Project name one  一般直接回车 
? Project description A Vue.js project  项目说明
? Author wxj  开发者
? Vue build standalone 默认回车
? Install vue-router? Yes 个人建议Y
? Use ESLint to lint your code? No 是否启用eslint检测规则，个人建议不使用
? Set up unit tests No  是否创建单元测试
? Setup e2e tests with Nightwatch? No 
? Should we run `npm install` for you after the project has been created? (recommended) npm