美文网首页
搭建VUE3.0开发环境

搭建VUE3.0开发环境

作者: 水又icf | 来源:发表于2022-03-04 21:19 被阅读0次

    1、安装Nodejs

    https://nodejs.org/zh-cn/download/
    下载对应操作系统的安装包
    检查:node -v

    2、安装vue3.0

    • 卸载旧版本:
      npm uninstall vue-cli -g
    • 安装新版本:
      npm install -g @vue/cli
    • 检查:vue -V
    • 安装卡顿解决办法
      1)安装国内cnpm镜像
      npm install -g cnpm --registry=https://registry.npm.taobao.org
      后续使用cnpm命令替换npm命令
      2)使用代理registry
      npm config set registry https://registry.npm.taobao.org

    3、创建Vue3.0项目

    vue create vue3demo
    选择对应版本后回车

    4、目录说明

    • node_modules
      项目依赖包,包括很多基础依赖,用户也可以使用nmp install [依赖包名]安装其他依赖
    • public
      公共资源目录,包含图片和HTML文件等。index.html是主入口文件,打包时复制里面文件到dist目录。
      -src
      源文件目录,包括以下内容:
      assets:静态资源
      components:组件
      router:路由
      store:容器
      view:视图组件
      App.vue:项目入口
      main.js:脚本入口

    5、运行vue项目

    进入项目目录下,执行命令:
    npm run serve

    6、安装VSCode

    下载地址:
    https://code.visualstudio.com/
    https://pc.qq.com/detail/16/detail_22856.html

    • 安装插件:Ctrl+Shift+X
    • 常用插件:
      Chinese (Simplified) (简体中文) Language:中文语言包
      Auto Close log:自动补全HTML标签
      Auto Rename Tag:自动重命名成对标签
      HTML CSS Support:语法提示
      jQuery Code Snippets:JQuery语法提示
      Vetur:官方插件
      Beautify:代码美化
      Bracket Pair Colorizer:括号分组变色
      Debugger for Chrome:调试工具
      ESLint:js语法纠错,可以自定义配置,不过配置较为复杂
      Path Intellisense:自动提示文件路径,支持各种快速引入文件

    相关文章

      网友评论

          本文标题:搭建VUE3.0开发环境

          本文链接:https://www.haomeiwen.com/subject/ekbmrrtx.html