美文网首页VUE学习
VUE学习----vscode搭建vue环境

VUE学习----vscode搭建vue环境

作者: 扮猪老虎吃 | 来源:发表于2020-12-29 11:13 被阅读0次
  1. 安装node.js并配置环境变量

链接:https://nodejs.org/zh-cn/download/

  1. vscode中新建终端,安装vue-cli
npm install -g vue-cli
  1. vscode终端中,安装webpack
npm install -g webpack
  1. 开始创建vue项目。首先创建一个文件夹存放项目,用vscode打开对应的文件夹,并新建终端。比如我的文件夹是vuefirsttry
vue init webpack vuefirsttry

注意:此步如果报错:因为在此系统上禁止运行脚本。

解决方法

以管理员身份运行vscode;
执行:get-ExecutionPolicy,显示Restricted,表示状态是禁止的;
执行:set-ExecutionPolicy RemoteSigned;
这时再执行get-ExecutionPolicy,就显示RemoteSigned;
  1. 运行vue init webpack vuefirsttry会出现一些配置项,可以根据需要配置,也可以默认,直接按回车。等待安装依赖项。完成之后,一个基本的 vue项目就搭建完了。完成之后的vscode左边可以看到项目目录,其中main.js就是入口。

  2. 运行项目。cd到项目文件夹内。

npm run dev
  1. 在浏览器输入: http://localhost:8080,出现页面,表示成功。
  2. 项目打包发不上线
npm run build

完成后,项目文件夹中出现一个dist文件夹,直接部署就好了。

相关文章

网友评论

    本文标题:VUE学习----vscode搭建vue环境

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