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 会看到如下效果:

 

     

原文地址:https://www.cnblogs.com/hzhuxin/p/14813778.html