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
Logo

前往低代码交流专区

更多推荐