vue vue-cli 基本环境安装与搭建指南

2018-04-04 本文已影响224人帅气的阿斌

1、node.js 的安装

window：官网下载node.js 安装，最好重启电脑，然后命令行输入patch，看是否有nodejs/路径，有说明路径正确，命令行输入node -v 查看当前安装版本

mac: 官方网下载，安装.... node -v 查看版本

sudo npm update npm -g 更新命令

npm i -g npm

2、vue-cli安装

window mac一样:

npm install -g vue-cli

NPM has moved to "coffeescript" (no hyphen) 这是安装过程可能出现的报警不用管

3.1、输入vue直接运行出现提示说明安装ok

Options:

-V, --version output the version number

-h, --help output usage information

Commands:

init generate a new project from a template

list list available official templates

build prototype a new project

help [cmd] display help for [cmd]

vue list 获取模板列表

★ browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.

★ browserify-simple - A simple Browserify + vueify setup for quick prototyping.

★ pwa - PWA template for vue-cli based on the webpack template

★ simple - The simplest possible Vue setup in a single HTML file

★ webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.

★ webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.

3.2、使用某个模板初始化一个工程，如下 webpack是模板名称 hellvue是工程名称

vue init webpack hellovue

然后出现类似如下信息：

? Project name hellvue

? Project description A Vue.js project

? Author ibinbro

? Vue build standalone

? Install vue-router? Yes

? Use ESLint to lint your code? Yes

? Pick an ESLint preset Standard

? Set up unit tests No

? Setup e2e tests with Nightwatch? No

输入Y或者N回车即可，然后就是开始安装依赖，时间很长

# Installing project dependencies ...

# ========================

完成后输入

cd hellvue //这是进入工程根目录的

npm run dev //运行环境成功后http://localhost:8080就能看见vue页面了