Vue Cli安装

1.环境准备

1. 下载node.js

   下载地址

   windows系统： .msi 安装包(exe)指定安装位置 .zip 压缩包直接解压至指定目录

2. 配置nodejs环境变量

   windows系统： 在环境变量中添加

   NODE_HOME = nodejs安装目录

   PATH=xxxx;%NODE_HOME%

3. 验证nodejs环境是否配置成功

   node -v
   

4. npm介绍

   node package manager（nodejs包管理工具）

5. npm配置淘宝镜像

   npm config set registry https://registry.npm.taobao.org
   

   npm config get registry
   

6. 配置npm下载依赖位置

   windows

   npm config set chche "D:\nodereps\npm_chche"
   npm config set prefix "D:\nodereps\npm_global"
   

7. 验证环境配置

   npm config ls
   

2.安装脚手架

0. 卸载脚手架

   npm uninstall -g @vue/cli	//卸载3.x版本
   npm uninstall -g vue-cli	//卸载2.x版本
   

1. Vue Cli官网

   链接

2. 安装Vue Cli

   npm install -g vue-cli
   

3. 第一个Vue脚手架项目

1. 创建第一个项目

   vue init webpack 项目名
   

2. 项目目录

   hello -----------------> 项目名

   ​ -build -----------------> 用来使用webpack打包使用build依赖

   ​ -config -----------------> 用来做整个项目的配置目录**（一般分开发和生产）**

   ​ -node_modules -------> 用来管理项目中使用依赖（相当于java中lib，不需要动）

   ​ -src -----------------> 用来书写Vue源代码（所有动的地方都在这里）

   ​ –assets ----------------> 用来存放静态资源

   ​ –components ---------> 用来书写Vue组件

   ​ –router ----------------> 用来配置项目中路由

   ​ –App.vue --------------> 项目中根组件

   ​ –main.js ---------------> 项目中主入口（Vue实例在此处）

   ​ -static -----------------> 其他静态

   ​ …

   ​ -index.html ---------------> 项目主页（无需动）

3. 如何运行

   在有package.json的目录中运行

   npm run dev