安装脚手架 Vue-cli 并且创建运行项目

脚手架需要的环境

• Node.js 运行环境

  进入 https://nodejs.org/zh-cn/ 下载,安装

• npm(node package manage) 依赖包

  基于Node.js的包管理器，也是整个Node.js社区最流行、支持的第三方模块最多的包管理器。包含 node.js 所需的所有插件

安装好以后可以在黑窗口里输入 node -v看是否有 node.js 的版本号 ，以及 npm -v 得到 npm 的版本号

淘宝镜像

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

安装淘宝镜像

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

黑窗口输入

cnpm -v

查看淘宝镜像是否安装成功

安装 Vue.cli 脚手架

黑窗口输入
npm install -g @vue/cli 或淘宝镜像安装 cnpm install -g @vue/cli
来安装脚手架

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

安装 webpack

脚手架编译代码实际是在 webpack 中编译的(并非浏览器)
安装cnpm install -g webpack和cnpm install webpack-cli -g
输入webpack -v查看是否安装成功

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

1.黑窗口输入 cd+空格+文件夹路径 转移盘符到你想要存放项目的文件夹下

黑窗口输入 vue create project-name来创建项目
注意:

project-name

为自定义名，即你的项目名

2.弹出以下界面

Vue CLI v4.0.5
? Please pick a preset: (Use arrow keys)
> default (babel, eslint) //默认只装babel和eslint
Manually select features    //手动选择对应功能

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

3. 弹出以下界面

(*) Babel //肯定要选择，默认选择es6对应语法
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
( ) CSS Pre-processors
( ) Linter / Formatter
( ) Unit Testing
( ) E2E Testing

使用空格选择，初学只选择

Babel

即可

4.弹出以下界面

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files
In package.json

选择

In package.json

生成管理依赖包文件
此时弹出

Save this as a preset for future projects? (y/N)

意思是是否保存现在选择的模板，选 n 不让它保存
等待安装

打开项目

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

• 点赞
• 收藏
• 分享
• 文章举报

美团骑手OT 发布了15 篇原创文章 · 获赞 11 · 访问量 1274 私信 关注