Mac OS下搭建Vue开发环境


做者 李明明
转载请注明出处:https://www.jianshu.com/p/38a7564e84cc

前言

原来一直学习使用React,如今由于工做的须要,对Vue进行学习和使用,如今比较流行的框架React,angular,vue,正好对于vue也进行些了解。vue

环境搭建

  1. 打开终端,安装brew
usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

安装成功后,使用查看版本,验证是否安装成功node

brew -v

image.png
2. 安装node.jswebpack

brew install nodejs

也能够下载安装下载地址
安装成功后,使用验证git

node -v
  • 给nodejs目录赋权限
 sudo chmod -R 777 /usr/local/lib/node_modules/
  • 安装 淘宝镜像 (npm)
npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 安装webpack
cnpm install webpack -g
  • 安装vue脚手架
npm install vue-cli -g

开始Vue

# 建立一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里须要进行一些配置,默认回车便可
This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack#1.0 my-project

? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "my-project".

   To get started:
   
     cd my-project
     npm install
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack

进入项目,安装并运行:github

$ cd my-project
$ cnpm install
$ cnpm run dev
 DONE  Compiled successfully in 4388ms

> Listening at http://localhost:8080

image.png