vue的安装及简单工程创建

最新推荐文章于 2024-09-03 11:14:22 发布

Sindyue

最新推荐文章于 2024-09-03 11:14:22 发布

阅读量478

点赞数 2

分类专栏：前端Web

本文链接：https://blog.csdn.net/Sindyue/article/details/104051363

版权

前端Web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.几个概念

npm: Nodejs下的包管理器。
webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。
vue-cli: 用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装）

2. 安装步骤

2.1 安装nodeJs

下载链接：https://nodejs.org/en/

推荐使用第一个链接，比较稳定。下载后，双击开始安装，如下图：
在这里插入图片描述

在这里插入图片描述

点击Finish完成

安装完毕后，可以通过命令行卡是否安装成功，如下：

![在这里插入图片描述

2.2 配置npm的本地仓库

在这里插入图片描述
npm的本地仓库跑在系统盘c盘的用户目录了(没见到npm-cache是因为没有用过，一使用缓存目录就生成了)，我们试图把这2个目录移动回到 D:\Program Files\Nodejs

然后运行如下两条命令：
npm config set prefix “D:\Program Files\Nodejs\node_global”
npm config set cache “\Program Files\Nodejs\node_cache”
如图，可以看到路径已经变化：

在这里插入图片描述
注意，此时，默认的模块D:\Program Files\Nodejs\node_modules 目录
将会改变为D:\Program Files\Nodejs\node_global\node_modules 目录，
如果直接运行npm install等命令会报错的。
我们需要增加环境变量NODE_PATH 内容是：D:\Program Files\Nodejs\node_global 在这里插入图片描述

配置好后，使用vue查看版本号，如图：

2.3 使用淘宝NPM 镜像

大家都知道国内直接使用npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
在这里插入图片描述
配置成功后，我们可以通过 npm config list 显示所有配置信息，如下：

输入命令npm config list 显示所有配置信息，我们关注一个配置文件
C:\Users\Administrator.npmrc

用文本编辑器打开后如下，可以看到刚刚配置的内容：
在这里插入图片描述
输入命令检测下可行不可行，cnpm config get registry

3. 项目初始化

3.1 安装vue-cli
cnpm install vue-cli -g //全局安装 vue-cli
在这里插入图片描述
查看vue-cli是否成功，不能检查vue-cli,需要检查vue

选定路径，新建vue项目，这里我是在D盘新建了vueDemo文件夹，cd目录路径

下面我一项目名为sell新建vue项目

vue init webpack ”项目名称“
在这里插入图片描述
接下来，就是再安装下项目依赖，运行项目，就可以在浏览器打开了，如下：
cnpm install —目前好像是已经自动安装依赖了，此步骤可以省略，直接进入下一目录，执行运行语句。
cnpm run dev
注意：这里要在新建的文件夹目录，即这里的 D:\vueDemo\vueDemo 目录下进行执行命令。
在这里插入图片描述
至此，一个完整的工程就可以了。

nmp下新建出来的vue01的目录描述：

4. 遇到的问题

4.1 安装完vue-cli，在命令行下运行报

	vue : 无法加载文件 D:\nodejs\node_global\vue.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。

解决办法：

到D:\nodejs\node_global目录，把vue.ps1删了

4.2 Node Sass运行错误

Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (72)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.11.0
    at module.exports (D:\SVN_Kingnew\code\store_chain_pc\trunk\kingnew-dian-chain\node_modules\node-sass\lib\binding.js:13:13)
    at Object.<anonymous> (D:\SVN_Kingnew\code\store_chain_pc\trunk\kingnew-dian-chain\node_modules\node-sass\lib\index.js:14:35)
    at Module._compile (internal/modules/cjs/loader.js:955:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
    at Module.load (internal/modules/cjs/loader.js:811:32)
    at Function.Module._load (internal/modules/cjs/loader.js:723:14)
    at Module.require (internal/modules/cjs/loader.js:848:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.sassLoader (D:\SVN_Kingnew\code\store_chain_pc\trunk\kingnew-dian-chain\node_modules\sass-loader\lib\loader.js:24:22)

一定要在当前的工程目录下执行语句：npm rebuild node-sass，升级node-sass 的版本。

参考链接：
https://www.cnblogs.com/lgx5/p/10732016.html
https://www.jianshu.com/p/02b12c600c7b