vue环境搭建及创建运行项目

vue项目所需环境

• 安装 Node .js环境 ， 这是目前前端技术的基础环境 ， 大部分技术技都依赖它，所以必须要安装。
• 包管理器 NPM （node package manage ），npm是集成在node中的，所以安装了node也就有了npm
• vue-cli:用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库）
• webpack: webpack是一个模块打包的工具，它的作用是把互相依赖的模块处理成静态资源

1.安装Node.js

进入 https://nodejs.org/zh-cn/download/ 下载

安装：

安装位置可自行选择

一直点next

最后finish完成安装

打开CMD 检查是否正常

输入node -v 命令，查看node的版本，若出现相应的版本号，则说明你安装成功了
npm包管理器，是集成在node中的，所以安装了node也就有了npm,直接输入 npm -v 命令，显示npm的版本信息

2. 安装淘宝镜像

因为 npm 是国外网站, 实际应用中使用 npm 来安装各种插件安装速度会非常慢。所以使用淘宝镜像 cnpm , cnpm的本质就是把 npm 所包含的插件放到了淘宝的网站上。

win + R 输入 cmd 进入黑窗口输入npm install -g cnpm --registry=https://registry.npm.taobao.org 安装淘宝镜像
黑窗口输入 cnpm -v 查看淘宝镜像是否安装成功

也可以直接给npm配置淘宝镜像

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

3. 安装vue-cli 脚手架构建工具

在命令行中运行命令 npm install -g @vue/cli 或淘宝镜像安装 cnpm install -g @vue/cli
然后等待安装

安装成功后可以黑窗口输入 vue --version 来查看版本号验证是否安装成功

安装webpack

在命令行中输入cnpm install -g webpack 或 cnpm install webpack-cli -g ，然后等待安装

输入webpack -v后
最后输入 webpack -v 查看是否安装成功

安装成功后创建一个vue cli 项目

1. 黑窗口输入 cd+空格+文件夹路径 转移盘符到你想要存放项目的文件夹下
   黑窗口输入 vue create project-name来创建项目
   注意: project-name 为自定义名，即你的项目名

2. 弹出以下界面
   

选择 Manually select features 回车选择相应功能

3. 弹出以下界面
   

使用空格选择，初学只选择 Babel 即可

4.弹出以下界面




此时弹出 Save this as a preset for future projects? (y/N)
意思是是否保存现在选择的模板，选 n 不让它保存
等待安装

打开项目

1. 黑窗口切换盘符到你项目对应文件夹
2. 例如上述例子，切换到路径 …\project-name 即可
3. 输入 npm run serve 运行项目
   
4. 复制 Local 的路径复制到浏览器当中，看到效果

6. 项目搭建成功

在编译器中打开创建好的项目目录

vue-cli详细讲解视频可参考https://www.imooc.com/learn/1173