需先安装node,在根目录安装,若是windows就安装c盘。安装完node会自带npm,npm -v检测
node下载地址:http://nodejs.cn/download/
mac安装需要获取root权限,输入 sudo -s 会提示输入密码,完成即可安装
提示权限不足是需要加sudo
安装webpack -g 表示全局安装
npm install webpack -g
确认NPM和的Webpack是否安装。
// 检测 node
node -v
// 检测 npm
npm -v
// 检测 webpack
webpack -v
出现版本号为已安装。
安装VUE的几种方法:
// 全局安装
npm install -g vue-cli
// 淘宝镜像安装
npm install -g cnpm --registry=https://registry.npm.taobao.org/
// 安装完成后检测是否安装成功
vue -V
创建项目
选择要放项目的文件夹
// 自定义项目
vue init webpack demo
图片用的是之前Windows版本,提示信息都一样
项目安装完成,进入自己创建的项目文件夹
// 安装依赖
cnpm install
// 启动项目
npm run dev
如果端口冲突可在配置里index.js下修改
autoOpenBrowser: true, //自动打开浏览器
配置完成,浏览器会自行启动,实时刷新页面。
按需安装各种组件
// 安装路由
cnpm install vue-router
// 安装sass
cnpm install sass-loader
// 安装node sass
npm install node-sass
// 安装echarts
cnpm install echarts --save
// 安装验证组件
cnpm install vee-validate
// 安装style-loader
npm install stylus-loader css-loader style-loader --save-dev
// 如果stylus安装失败可单独安装
npm install stylus
//如使用$api superagent安装:
cnpm install superagent -D
//安装iview
npm install iview --save
// 安装resource接口请求工具
npm install vue-resource --save-dev
//安装vuex
npm install vuex --save
//通过require的方式来引入css,首先需要安装css-loader,如果需要在js中,require,.less文件,那么我们需要增加包less-loader和less包
npm install font-awesome-webpack less less-loader css-loader style-loader file-loader font-awesome
// 一个自定义滚动插件
npm install vue-seamless-scroll --save
打包
// 项目打包 ctrl+c 终止项目
npm run build