Mac环境下如何配置Vue?一文就够!
在Mac下如何配置Vue环境
1.安装Homebrew
Homebrew 是类似于 Mac App Store 的一个软件商店,对于Mac用户是必不可少的!如果没有安装的话,只需要在终端复制下面这段代码即可。
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
测试 Homebrew 是否正确安装
输入brew -v
出现版本信息即为安装成功。
2.安装node.js
已经安装Homebrew后,我们就用brew来安装 在终端中输入以下代码(也可以在官网 nodejs链接下安装)
brew install nodejs
安装完成后输入
node -v
nom -v
若出现版本信息即为安装成功
3.安装cnpm
为了提高我们的效率,可以使用淘宝的镜像:http://npm.taobao.org/ ,在终端中输入以下代码:
npm install -g cnpm --registry=https://registry.npm.taobao.org
4.安装Vue.js
选择用package manager工具-npm ,在终端中输入以下代码:
npm install -g vue-cli
5.创建Vue项目
vue init webpack project_one
“project_one” 替换成自己的项目名称即可。
接下来会出现一些设置选项,按步骤输入项目信息,注意Project name不支持大写字母为项目名,项目创建好后,它也给出了提示信息,继续操作即可。可以根据自己的需要进行选择,也可以直接按回车默认选项。
安装参数说明:
Vue build => 打包方式,回车即可;
Install vue-router => 是否要安装 vue-router 要 Y 回车;
Use ESLint to lint your code => 是否需要 js 语法检测 不要 n 回车;
Set up unit tests => 是否安装 单元测试工具 不要 n 回车;
Setup e2e tests with Nightwatch => 是否需要 端到端测试工具 不要 n 回车;
6.安装组件
每一个项目都有一个package.json文件,里面有很多组件信息,使用npm install将按照package.json安装所需要的组件放在生成的node_modules文件夹中,项目下的每一个文件中都可以通过import引入node_modules的组件来加以使用,在终端中输入以下代码:
cd my-project
npm install
cd进入项目目录,安装依赖
7.安装 vue 路由模块vue-router和网络请求模块vue-resource
cnpm install vue-router vue-resource --save
8.启动服务器
npm run dev
报错总结
启动项目报错:
webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
解决办法:
1.先删除模块 2.下载重装webpack-dev-server 3.重新 npm run dev
npm uninstall webpack-dev-server
npm install webpack-dev-server@2.9.1
npm run dev
更多推荐
所有评论(0)