vue脚手架创建

GalaxyShines

已于 2023-12-09 12:54:16 修改

阅读量55

点赞数

分类专栏： # Vue&Vue-Router 文章标签： vue.js 前端 javascript

于 2023-11-07 09:20:38 首次发布

本文链接：https://blog.csdn.net/ydk1203/article/details/134259018

版权

Vue&Vue-Router 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>