Vue-cli脚手架的使用
1.网址清单
Vue2官网
Vue3官网
Vue-Route-v4.x官网
Vue-Route-v3.x官网
Node.js官网
VSCode官方下载
VSCode国内备用下载镜像(下载后需要在内部更新)
2.操作步骤
2-1 前往Node.js官网地址下载Node.js
2-2 作者使用VsCode开发工具，下载VSCode
2-2-1 接受协议，下一步
2-2-2 选择路径，下一步
2-2-3 下一步
2-2-4 全部勾选，下一步
2-2-5 安装完成
2-3 执行Win+R，输入cmd后，Ctrl+Shift+Enter以管理员身份启动
2-4 输入命令下载yarn
npm install -g yarn
2-5 执行Win+R，输入powershell后，Ctrl+Shift+Enter以管理员身份启动
2-6 输入命令修改权限
Set-ExecutionPolicy RemoteSigned
弹出询问后输入 Y
请注意！VScode或Idea需要重启后才能使用npm指令！
2-7 在管理员身份vscode资源管理器中，在想要创建脚手架的文件夹上右键选择“在集成终端中打开”
2-8 全局安装：
yarn global add @vue/cli或者npm i -g @vue/cli
安装完成后查看Vue版本（检查是否成功安装）：
vue --version
2-9 创建vue脚手架:
vue create project-name（项目名不能使用中文）
2-10 启动项目：
yarn serve或npm run serve
如果希望指定项目启动使用的端口号，执行以下命令：
npm run serve -- --port 端口号
也可以修改项目中的vue.config.js配置文件永久指定项目使用的端口
加入以下代码：
module.exports = {
devServer: {
open: true,
port: 8081
}
}
2-11
3.可选操作
-
下载vue-router，进入脚手架文件夹中，执行命令
yarn add vue-router -
Vue开发使用的VSCode插件配置：
4.其他操作
a.发布
1、在命令行中进入项目根目录，执行以下命令进行打包：
npm run build
2、打包完成后，会在项目根目录下生成一个dist文件夹，里面包含了打包后的所有文件。
3、将dist文件夹中的所有文件复制到一个新的文件夹中，例如命名为my-website。
4、在my-website文件夹中创建一个index.html文件，并将以下代码复制到文件中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Website</title>
</head>
<body>
<div id="app"></div>
<script src="./js/chunk-vendors.js"></script>
<script src="./js/app.js"></script>
</body>
</html>
注意：上述代码中的js文件路径需要根据实际情况进行修改。