Vue项目入门(一)

一、安装Visual Studio Code、Node.js

Visual Studio Code下载地址:https://code.visualstudio.com/Download

Node.js下载地址:https://nodejs.org/en/download/

安装完成后,Win+R打开运行窗口,输入"cmd",在打开的cmd窗口中输入"path",检查环境变量中是否已添加nodejs。

 

 

二、安装vue-cli,vue-cli可以帮助我们快速构建Vue项目

 

 打开Visual Studio Code,点击"终端"->"新建终端",输入:npm install -g vue-cli

 

 

三、安装webpack,它是打包js的工具

在终端中输入:npm install -g webpack

 

四、搭建Vue项目

1、创建Vue项目文件夹,并在终端中切换到该文件夹下。输入:vue init webpack  [项目名称]

 

 在上图中,输入该命令提示异常。该异常是由于PowerShell执行脚本策略权限不足导致。详细解释参考:https://blog.csdn.net/XreqcxoKiss/article/details/104482823

4种常见的PowerShell策略:
Restricted: (默认策略)
禁止运行任何脚本和配置文件。
AllSigned
可以运行脚本,但要求所有脚本和配置文件由可信发布者签名,包括在本地计算机上编写的脚本。
RemoteSigned
可以运行脚本,但要求从网络上下载的脚本和配置文件由可信发布者签名; 不要求对已经运行和已在本地计算机编写的脚本进行数字签名。
Unrestricted
可以运行未签名脚本。(危险!)

2、若由于脚本策略问题导致项目初始化失败,则变更脚本执行策略。在终端中输入:set-ExecutionPolicy RemoteSigned

 

 3.更改策略后重新执行"vue init webpack [项目名称]"命令。在出现的配置询问中若不需要更改直接输入回车确认。等待执行结束,Vue项目就搭建完成了。

 

4.运行项目。切换到项目文件夹下,输入命令:"npm run dev"。成功之后,在浏览器里输入:http://localhost:8080即可看到网页。

5.打包项目。输入命令:"npm run build"。完成之后,项目文件夹中会出现一个dist文件夹,里面就是打包之后的内容,直接部署到服务器就好了。

posted @ 2020-12-30 21:09  橘子梗  阅读(228)  评论(0编辑  收藏  举报