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 项目
-
黑窗口输入 cd+空格+文件夹路径 转移盘符到你想要存放项目的文件夹下
黑窗口输入 vue create project-name来创建项目
注意: project-name 为自定义名,即你的项目名 -
弹出以下界面
选择 Manually select features 回车选择相应功能
- 弹出以下界面
使用空格选择,初学只选择 Babel 即可
4.弹出以下界面
此时弹出 Save this as a preset for future projects? (y/N)
意思是是否保存现在选择的模板,选 n 不让它保存
等待安装
打开项目
- 黑窗口切换盘符到你项目对应文件夹
- 例如上述例子,切换到路径 …\project-name 即可
- 输入 npm run serve 运行项目
- 复制 Local 的路径复制到浏览器当中,看到效果
6. 项目搭建成功
在编译器中打开创建好的项目目录