搭建vue框架创建自己的vue项目

搭建vue框架创建自己的vue项目

1. 打开命令行

找到自己要键vue项目的文件夹页面，shift键+鼠标右键点击，在面板中点击“在此处打开power shell窗口”；在此命令窗口中安装vue框架。

2.安装node

安装node（Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境）
参照官网：node中文官网
检查是否安装成功： node -v 回车；结果为版本号则安装成功。如下图所示：

更新node：
① npm i -g n --force 回车；npm全局安装一个弄得版本管理模板n。如下图所示：

②n stable 回车；安装最近的稳定版本。

3.安装npm包管理器

npm包管理器，是集成在node中的，所以安装了node也就有了npm。
检查是否安装成功：npm -v 回车；如下图所示（出现结果为版本号）：

4.使用阿里巴巴在国内的镜像服务器安装淘宝镜像。

① npm config set registry https://registry.npm.taobao.org 回车；通过config命令设置默认下载路径。如下图所示：

②之后执行：npm install --global vue-cli 回车
如下图所示：

检查是否安装成功： node -v 回车；
出错及解决
在安装玩vue之后检查是否安装成功（命令：vue -V）时出错
错误提示：

vue : 无法加载文件
C:\Users\Administrator.DESKTOP-737GEKA\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1

• vue -V

•   + CategoryInfo          : SecurityError: (:) []，PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess
  

如下图所示：

解决办法：
①在命令行输入： powershell 回车
②继续输入： set-executionpolicy remotesigned 回车
③选择 y即可解决。
如下图所示：

5.创建自己的vue项目

命令： vue init webpack my-newgz（my-newgz为自己的项目名）；如下图所示：

出错及解决
问题描述：使用vue init webpack my-project（自己项目名） 命令创建自己的项目时出错。
错误提示：
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 回车，再创建自己的项目文件即可。
参考原文档解决：
点此链接查看详细解决办法

6.成功创建vue项目

①在创建vue文件夹的文件中查看，“my-newgz”文件夹已被拆功能键，如下图所示：

②打开创建的项目目录如下图所示：