Vue 入门 --- 安装与构建

[felix-cao]

Vue 官网 vue-cli npm Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

一、安装

安装 webpack,

$ npm install webpack -g

webpack 4.X 开始，需要安装 webpack-cli 依赖 ,所以使用这条命令

$ npm install webpack webpack-cli -g

安装 vue-cli 命令行工具

$ npm install vue-cli -g

最新的 vue 命令行工具是 4.x, 但无法在 git-bash 环境下使用

检测如果出现相应的版本号，则说明安装成功。

$ vue -V

二、构建项目

$ vue init webpack felix

felix 为项目名称，首字母不能大写

安装 felix 项目依赖文件

$ npm install

让 felix 项目跑起来

$ npm run dev

三、项目目录

index.html 是入口 html 文件 main.js 是入口 js 文件 App.vue 是入口 vue 组件，是第一个组件

[felix-cao]

在第二步构建项目时出现如下错误：

vue-cli · Failed to download repo vuejs-templates/simple

解决办法 ：

git clone https://github.com/vuejs-templates/webpack ~/.vue-templates/webpack
vue init --offline webpack felix
cd felix
npm install
npm run dev

如果您的电脑装有 VPN 软件，可以参考 Mac 命令行翻墙 中配置 git 代理