vue项目创建

vue项目创建（mac os）

1. node.js下载 中文网下载地址速度快

打开终端分别执行命令行 node -v / npm -v 如果出现版本号说明node.js环境已经配置完成

2. 安装 webpack 打包工具

npm install webpack -g

上面命令执行过程中有可能出现权限错误 Error: EACCES: permission denied

1. 解决方案具有
1. 修改npm默认的安装路径此方法不建议采用

mkdir ~/.npm-global

npm config set prefix '~/.npm-global'

export PATH=~/.npm-global/bin:$PATH

2. 修改权限执行下面的命令

sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}

2. 检验webpack 是否安装成功 webpack -v 如果看到是版本号说明安装成功,注意如果是采用第一种方案去修改npm的安装路径需要进去对应的文件下去执行

3. 利用 vue-cli 开始创建vue项目

1. 安装 vue-cli 脚手架

npm install vue-cli

2. 创建一个以webpack为模板的vue项目 myproject 是项目文件名

vue init webpack myproject

效果图以及每一步提示的描述：注意项目名称不能有大写字母

4. 启动 vue 项目

以上的操作完成
执行
cd myproject
npm run dev

访问项目 http://localhost:8080 看到vue的页面那么启动成功

5. 开发移动端app需要注意引入以下的几点

I. 屏蔽掉不同的移动端的样式问题(重置样式) 可以百度 reset.css 下载
II. 解决 border 1px 边框的问题重置样式百度 border.css 下载
III. click 事件点击 300毫秒响应问题
在当前项目下下载 fastClick --> npm install fastClick --save

在入口文件 main.js 中分别引入

import '@/assets/styles/reset.css'
import '@/assets/styles/border.css'
import fastClick from 'fastclick'
fastClick.attach(document.body)