码迷,mamicode.com
首页 > 其他好文 > 详细

vue项目创建

时间:2019-12-15 00:51:05      阅读:142      评论:0      收藏:0      [点我收藏+]

标签:conf   img   版本号   访问   默认   编写   https   err   tac   

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)

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

vue项目创建

标签:conf   img   版本号   访问   默认   编写   https   err   tac   

原文地址:https://www.cnblogs.com/youer66/p/12041647.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!