mac下配置vue环境

我在简书里看到一个文章,按它来操作来超级顺利,我把它复制过来了。原文原文

一、首先需要安装必要的软件

Homebrew :Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件

Node.js:JavaScript运行环境(runtime)

npm:    node.js下的包管理器,NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用

webpack : vue的组件都是.vue或者像微信小程序的.wxml或者.wxss等自定义组件都无法被用户端的浏览器解析,需要编译和打包成js文件       

vue-cli :用来生成模板的Vue工程

二、安装步骤

1.安装homebrew

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

注:在Max OS X 10.11(El Capitan)版本中,homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复:

sudo chown -R `whoami` /usr/local

在终端输入brew -v,如果能查询到brew的版本信息,那么恭喜你安装成功。可以继续往下撸了

2.使用homebrew安装node.js

brew install node

同上,如果在终端输入node -v 能够查询到版本信息,就说明安装成功。

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

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

4.安装全局的webpack

npm install webpack -g

5.安装vue脚手架vue-cli

npm install vue-cli -g

6.找一个合适的位置存放你的vue工程

cd 目录路径 

注:目录路径直接把创建好的文件夹拖拽到终端里就可以

7.创建项目

vue init webpack-simple 项目名

如:vue init webpack-simple vue2demo

注:项目名不可以使用中文,也不能使用大写字母

创建项目之后会出现一系列的参数配置,根据自己的情况 进行选择,因为最后2个的配置具体是啥意思我也没搞懂呢

8.将根目录切换到项目

cd 项目名

如:cd vue2demo

9.安装项目依赖

npm install

10.安装 vue 路由模块vue-router和网络请求模块vue-resource

npm install vue-router vue-resource --save

11.启动项目

npm run dev

注:如果运行成功,浏览器会弹出以下的运行结果图:

图1

四、本地编译器的选择

我用的是vscode(visual studio code)

图2

打开编译器,选择打开文件夹,就可以看到,刚刚创建的工程的目录列表

图3

注:如果你打开你的.vue文件发现一片灰,不要急,vscode会提示你安装相关插件工具,具体安装了啥忘记截图了,就记得第一个是tools什么的,然后重载页面,就可以看到五彩缤纷的编程页面了。今天就到这啦,继续加油。



作者:MM面包
链接:https://www.jianshu.com/p/918314e9f757
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

发布了83 篇原创文章 · 获赞 18 · 访问量 5万+

猜你喜欢

转载自blog.csdn.net/Abudula__/article/details/100049452