vue项目创建

Posted 2021-03-23 youer66

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)

所有的准备操作完成 开始编写页面吧