vue-cli脚手架创建VUE项目

一、环境准备

开发vue需要node.js环境，node.js自带npm，安装好node.js后，就可以使用npn命令启动项目。

1、安装node

node自带npm命令。

（1）下载：访问node官网https://nodejs.org/en/download/ ，选择跟自己的电脑匹配的版本进行下载；

（2）安装：

然后一步步的安装即可；

（）检查node与npm：

安装完成后打开cmd，输入node -v，如果出现版本信息即表示安装成功；

输入npm -v可以看到npm也有了，npm包管理器是集成在node中的。

2、安装cnpm（可选）

npm是国外镜像，会比较慢，cnpm是淘宝镜像，比如npm install应该会出现问题，cnpm就不会。cnpm需要额外安装：打开cmd，输入npm install -g cnpm --registry=http://registry.npm.taobao.org 。如果安装了之后使用cnpm命令报错： 无法加载文件 C:\Users\hp\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本，

解决方式：

1）、在系统中搜索框 输入 Windos PowerShell

2）、点击“管理员身份运行”

3）、输入“ set-ExecutionPolicy RemoteSigned”回车

4）、根据提示，输入A，回车

5）、再次回到cnpm -v执行成功。

3）、开发工具可以使用vscode。

3、安装vue-cli脚手架构建工具（可选）

如果需要在本地搭建VUE项目，则需要安装脚手架；如果只是运行项目则不需要。

输入命令 npm install -g vue-cli，安装完成即可。

二、搭建VUE项目：

1、选定路径，新建vue项目，这里我是新建到桌面上

2、在上一步得目录下新建项目，指令vue init  webpack +项目名称

3、上一步之后就会开始新建项目，询问项目的相关配置。一路yes省事儿没啥问题。像eslint这些后期都是可以再安装的

  自动生成的项目如下：

三、启动与运行：

1、启动项目：可以使用cmd命令cd到项目目录下，也可以使用ide工具如vscode的终端来启动。

   如果是新项目第一次启动需要先执行npm install安装相关插件(安装package.json中配置的依赖)，生成node_modules目录，再执行npm run dev启动项目。

  以后启动项目只需要执行npm run dev即可。

  注：脚手架生成的项目已经生成node_modules了，所以不需要再执行npm install了。

2、测试：启动后在浏览器中打开这个网址，就能看到

至此，vue项目新建完毕