搭建Vue项目

1、安装 node

安装 vue 前电脑中必须已经安装成功 node.js
node.js 下载链接
下载完成后,执行安装程序,直接进行安装即可
安装完成后,打开命令行窗口(cmd)
输入 node -v 和 npm -v 可查看安装的 node.js 和 npm 的版本号

2、安装编译器

VSCode下载链接

3、安装Vue

使用 npm 进行安装,安装速度慢,因为资源在国外,可以使用国内镜像

1.首先切换淘宝镜像

npm config set registry http://registry.npm.taobao.org/

2.安装 vue 的脚手架

npm install –g @vue/cli

4、创建Vue项目

4.1、创建文件

创建文件夹用 vscode 打开,点击终端按钮,cd 进入到你要创建的文件夹里,输入命令

vue create vue01

在这里插入图片描述

4.2、选择配置信息

通过上下方向键选择,然后回车确认,选择 Manually select features 自定义配置。
在这里插入图片描述
之后按空格键选择要安装的资源配置,为*号说明已选中。
在这里插入图片描述
选择vue版本
在这里插入图片描述

4.3、路径模式选择

是否使用 history router? 我选n,即不使用。
在这里插入图片描述

4.4、选择 Css 预处理语言

选择 Less,主要为 css 解决浏览器兼容,简化 css 代码等问题。
在这里插入图片描述

4.5、选择一个linter / formatter配置

选择标准配置。
在这里插入图片描述

4.6、选择额外的lint功能

选择Lint on save
在这里插入图片描述

4.7、选择如何存放配置

我都会统一集成在 package.json 文件
在这里插入图片描述

4.8 是否保存本地配置

这里选择 yes 会保存一个模版,以后创建项目可以直接选择。刚学习应该多练手,不
建议保存。
在这里插入图片描述

4.9 搭建完毕

在这里插入图片描述
到这里 VUE 项目就搭建完毕了,输入命令进入 vue01 的路径里

cd vue01

执行启动命令

npm run serve

在这里插入图片描述
复制地址用浏览器打开,或者按住Ctrl键单击地址打印。
在这里插入图片描述

相关推荐

  1. vue如何项目

    2023-12-14 17:12:02       16 阅读
  2. vue项目---1.基础的框架

    2023-12-14 17:12:02       31 阅读
  3. webpackvue2项目

    2023-12-14 17:12:02       33 阅读

最近更新

  1. TCP协议是安全的吗?

    2023-12-14 17:12:02       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-14 17:12:02       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-14 17:12:02       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-14 17:12:02       18 阅读

热门阅读

  1. 网络面试题总结

    2023-12-14 17:12:02       31 阅读
  2. Mysql:慢cpu过高慢sql查询方法

    2023-12-14 17:12:02       36 阅读
  3. Redis中常见的三种删除策略

    2023-12-14 17:12:02       35 阅读
  4. 矩阵的相似标准型1

    2023-12-14 17:12:02       26 阅读
  5. 【点云异常点检测】MVTec AD数据集介绍

    2023-12-14 17:12:02       36 阅读
  6. PID算法

    PID算法

    2023-12-14 17:12:02      28 阅读
  7. solidity 整数溢出漏洞

    2023-12-14 17:12:02       37 阅读
  8. LinuxBasicsForHackers笔记 -- 了解和检查无线网络

    2023-12-14 17:12:02       41 阅读
  9. Moonbeam与Subsocial集成,为网络带来社交应用创建

    2023-12-14 17:12:02       35 阅读
  10. maui sqlite开发一个商城加购物车的演示(2)

    2023-12-14 17:12:02       33 阅读