从项目开始学习Vue——01

目录标题

    • 一、官方文档
    • 二、搭建环境
    • 三、停止服务
    • 四、使用 webstorm 一键创建项目
      • 创建过程可能出现错误
    • 五、启动和访问项目
    • (一)启动
    • (二)访问项目
    • 六、项目目录讲解

一、官方文档

https://cn.vuejs.org/

二、搭建环境

参考:如何创建Vue项目
从项目开始学习Vue——01_第1张图片
node 安装教程
从项目开始学习Vue——01_第2张图片

从项目开始学习Vue——01_第3张图片
从项目开始学习Vue——01_第4张图片
如果报不是命令:那么需要配环境变量 。
从项目开始学习Vue——01_第5张图片

三、停止服务

npm run serve 启动服务后,ctr + c 停止服务

四、使用 webstorm 一键创建项目

从项目开始学习Vue——01_第6张图片

从项目开始学习Vue——01_第7张图片
从项目开始学习Vue——01_第8张图片

创建过程可能出现错误

  • 错误1.(可能选错了vue-cli)
    ERR! code EPERM
    npm ERR! syscall open
    从项目开始学习Vue——01_第9张图片

  • 错误2. 说明(没给权限)
    npm ERR! code EPERM
    npm ERR! syscall mkdir

这三个修改使用权限
从项目开始学习Vue——01_第10张图片
选择文件右键,选属性。
从项目开始学习Vue——01_第11张图片

五、启动和访问项目

(一)启动

从项目开始学习Vue——01_第12张图片
从项目开始学习Vue——01_第13张图片

(二)访问项目

  1. 新建一个vue.config.js 文件(注意:使用webstorm 创建项目,这个文件已经存在了
  2. 添加配置,更改默认的端口8080
module.exports = {
    devServer:{
        host: 'localhost',// 域名
        port:81,  // 端口号的配置
        open:true   // 自动打开浏览器
    }
}

从项目开始学习Vue——01_第14张图片
图来自:如何创建Vue项目

六、项目目录讲解

Vue学习–Vue项目根目录介绍(1)这篇文章讲得很详细,可以自行阅读。
从项目开始学习Vue——01_第15张图片

你可能感兴趣的:(vue,学习,vue.js,前端)