利用 vue-cli 脚手架,作为搭建项目的第一步。
下面利用脚手架先搭建起一个简单的项目。
安装 nodejs
1、这个很简单,直接搜索,从网上下载 node 下载,直接安装一路向下。
2、利用命令查看版本
node -v
3、node 安装完毕,如果觉得 npm 下载资源慢,可以下载 cnpm,这个是国内的淘宝镜像。运行下面命令安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
利用命令查看 cnpm 命令
cnpm -v
到此 node 配置完毕
vue 脚手架安装
进行全局安装 vue 脚手架
npm install --global vue-cli
但是这个命令在 mac 上有可能报错,不要慌,这个权限的问题。加上 sudo 即可。
sudo npm install --global vue-cli
如果还是报错,就多运行几次就可以了。
利用脚手架创建第一个项目
vue init webpack demo1
下面解释下每个的意思
Project name (my-project) # 项目名称(我的项目)
Project description (A Vue.js project) # 项目描述一个Vue.js 项目
Author 作者(你的名字)
Install vue-router? (Y/n) # 是否安装Vue路由,也就是以后是spa(但页面应用需要的模块)
Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代码? (Y [ yes ] / N [ no ])
Pick an ESLint preset (Use arrow keys) # 选择一个预置ESLint(使用箭头键)
Setup unit tests with Karma + Mocha? (Y/n) # 设置单元测Karma + Mocha? (Y/ N)
Setup e2e tests with Nightwatch? (Y/n) # 设置端到端测试,Nightwatch? (Y/ N)
这里后面两项是单元测试,我没有用,直接选的 n,看你个人的情况而定。
安装依赖
cd demo1
cnpm install
等待一会便会安装完。
运行项目
npm run dev
或者运行
cnpm run dev
vue 脚手架搭建的项目完成了。