• vue开发环境搭建


    大致分这么几个骤:

    1. 安装node 、npm 、nvm

    2. 安装git 、vscode 以及vscode上的一些插件

    3. 安装vue-cli


    以下详细来说每个步骤

    1. 安装node 、 npm 、nvm

       在官网下载的 node 安装包,在mac上运行会自动安装在全局目录,使用过程中经常会遇到一些权限问题,所以推荐按该网站 https://www.runoob.com/w3cnote/nvm-manager-node-versions.html 介绍的方法卸载全局安装的 node/npm。

       所以我们最好是先安装nvm ,再通过nvm来安装node和npm, 安装nvm 可参照它的官网 https://github.com/nvm-sh/nvm/blob/master/README.md#installing-and-updating

    不过也会有个小问题,那个安装的shell脚本可能会无法下载,所以如果是mac电脑, 最简单的办法是使用 brew install nvm 来进行nvm的安装 , 安装完成后需进行简单的配置, 在终端窗口下执行

         

    echo "source $(brew --prefix nvm)/nvm.sh" >> .bash_profile

    . ~/.bash_profile //让环境变量生效。

    这样就可以使用nvm了来安装 node和npm。     

    nvm list      //可以查看当前已安装的node版本   
    
    nvm install {node版本号}      //来安装node, 当前最新版14.17.0

    由于网速的原因,我们通过npm安装一些依赖的时候,最好使用国内的镜像,所以可以考虑装一下cnpm , 如下: 

     npm install -g cnpm --registry=http://registry.npm.taobao.org

    2 . vscode上的一些插件的安装

         Vetur  

                vue文件的语法高亮显示,附带有格式化功能Alt+Shift+F(格式化全文),可以对代码进行格式化检查.

         vscode-icons

                为文件类型提供相应的图标

         css peek

               代码中样式的关联

         Eslint

                用来检查代码

         Auto Close Tag

                自动闭合HTML/XML标签,只要输入前面一个标签,后一个结尾标签会自动生成,不用再跳到后面去添加相当的方便快捷.

         Auto Rename Tag

                自动同步修改对象开头/结尾的标签,修改标签的时候相当有用,当内容很长且相同标签比较多时不容易分辨,这是它作用的很大.不用担心找不到位置了,直接该前面的标签,对应的尾部标签会自动同步修改.

         HTML Boilerplate

                 html模板化

    3. 安装 vue-cli

    cnpm install -g vue-cli

     

    vue init webpack todolist //使用vue创建标准化项目

     在todolist目录下执行:npm run dev 

    然后在浏览器上输入 http://localhost:8080 会看到如下效果:

     

         

  • 相关阅读:
    $(document).ready(function(){}) 与 window.onload = function(){} 区别
    [如何在Mac下使用gulp] 1.创建项目及安装gulp
    Mac 执行 gulp 报错 bash: gulp: command not found
    css 字体单位之间的区分以及字体响应式实现
    [nodejs]在mac环境下如何将node更新至最新?
    [angular 1.x] 使用select 实现下拉列表 ngoptions 与 ngrepeat的取舍
    事件冒泡、事件捕获、事件委托初探
    Android 随机铃声管理器
    git 强制恢复到某一版本
    混乱中生存
  • 原文地址:https://www.cnblogs.com/hzhuxin/p/14813778.html
Copyright © 2020-2023  润新知