Vue-cli 搭建项目详情

一、安装Node.js

1.1 官网进行下载：https://nodejs.org/zh-cn/ （推荐多数人下载的LTS版本）

下载完后，一直Next直到安装完成即可。

1.2 查看是否安装完成

以管理员权限打开控制命令行程序(CMD),输入 node -v 以及 npm -v 检查是否安装成功。下为成功图：

1.3 环境变量记得配，就在Path加个安装的路径进去就可以

二、安装使用淘宝NPM 镜像

2.1 安装镜像

国内使用npm的官方镜像速度很慢，推荐使用淘宝的npm镜像

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

三、项目构建初始化

3.1安装vue-cli指令：cnpm install vue-cli -g ，安装成功结果图：

3.2 使用VS CODE搭建一个项目

首先，选择新建好的文件夹

其次，输入指令 vue init webpack 项目名称；手动创建可以直接按4个回车进行下一步，

其中第一行默认为上面指令赋予的项目名称，第二行为描述，第三行为作者名可为空，路由可以选择不安装

接着都输入n，拒绝自动生成。

3.3 启动项目

指令：cnpm run dev，我这边报错了如下图：

run : 无法将“run”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，    d
如果包括路径，请确保路径正确，然后再试一次。
所在位置 行:1 字符: 1
+ run dev
+ ~~~
    + CategoryInfo          : ObjectNotFound: (run:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException

PS E:\IDEA\vuedemo1209> cnpm run dev
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path E:\IDEA\vuedemo1209\package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'E:\IDEA\vuedemo1209\package.json'npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Lenovo\AppData\Roaming\npm-cache\_logs\2020-12-09T02_55_03_615Z-debug.log

查了问题有两个：1.电脑的Windows Powershell权限修改一下：Set-ExecutionPolicy RemoteSigned 

                             2.json包没有找到，要进入到你建的项目文件夹进行启动

四、启动成功, 复制地址到浏览器黏贴：http://localhost:8080

最后附一张：搭建完的项目文件具体介绍，以及VS CODE的装插件