Vue学习——搭建脚手架（mac版本）

Vue学习笔记 — 搭建脚手架

一、mac安装vue-cli脚手架

1.1 需要准备的环境

• Homebrew：Mac系统下的包管理器，类似于linux的apt-get,Windows的控制面板-安装删除应用程序
• Node.js: javascript运行环境（runtime）不同的系统直接不能直接运行各种编程语言，Runtime可以统一环境
• npm: Nodejs下的包管理器，类似于mac下的Homebrew
• webpack: Vue的组件都是通过.vue或者像微信小程序的.wxml和.wxss等自定义的组件都无法被用户端的各种浏览器解析，需要被翻译和打包成.js文件
• vue-cli: 用来生成模版的Vue工程

1.2安装相应的插件

（1）安装brew

打开终端的运行以下命令：

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

安装成功后，查看一下brew的版本信息

brew -v（2）安装node.js

在终端中运行以下命令

brew install nodejs

也可以下载安装（我是下载安装的）

下载地址：https://nodejs.org/en/download/

安装成功后，查看一下node.js的版本信息

node -v

（3）获取nodejs模块安装目录访问权限

　sudo chmod -R 777 /usr/local/lib/node_modules/

（4）安装淘宝镜像(npm)

npm install -g cnpm --registry=https://registry.npm.taobao.org

（5）安装webpack

cnpm install webpack -g

（6）安装vue脚手架

cnpm install vue-cli -g

在终端输入vue或者vue-cli查看vue是否安装成功

（7）建一个放工程的文件夹，在终端进入该目录

cd 目录路径

（8）根据模版创建项目

vue init webpack-simple 工程名字<工程名字不能用中文>
如下
vue init webpack-simple demo1

有一些初始化的设置：

（9)安装项目依赖

cnpm install 

（10）启动项目：

[外链图片转存失败(img-Rs3yxi3I-1567242838150)(https://i.loli.net/2019/04/03/5ca467161b8d2.jpg)]

cd 当前目录
运行项目：
npm run dev