销售型网站设计,贵阳城乡和住房建设厅网站,论述制作网站的一般过程,对招聘公司做评价的网站文章目录 一、概述二、前提准备1. 安装 node-js2. npm 镜像设置3. 安装 vs-code 三、脚手架搭建1. Vue-2 搭建1. Vue-3 搭建 一、概述 官网#xff1a;http://cn.vuejs.org/ vue 有两个大版本#xff0c;分别是 vue-2 和 vue-3#xff0c;目前新项目的话用 vue-3 的会比较多… 文章目录 一、概述二、前提准备1. 安装 node-js2. npm 镜像设置3. 安装 vs-code 三、脚手架搭建1. Vue-2 搭建1. Vue-3 搭建 一、概述 官网http://cn.vuejs.org/ vue 有两个大版本分别是 vue-2 和 vue-3目前新项目的话用 vue-3 的会比较多
vue-2 官方文档https://v2.cn.vuejs.org/v2/guide/installation.html
vue-3 官方文档https://cn.vuejs.org/guide/introduction.html
以下我会分别提供搭建 vue-2 和 vue-3 脚手架的过程。 二、前提准备
1. 安装 node-js 为什么要下载 node-js
node 提供了 Javascript 的运行环境可以让 Javascript 运行在服务端的开发平台
node-js 下载https://nodejs.org/en/download/ 一般会选择在 LTS 下进行下载因为 LTS 是稳定版本的然后根据自己电脑的系统选择安装比方说我电脑是 windows-64x 的那我就点击 Windows Installer.msi 64-bit 就会开始下载 如果想要下载旧版本可在 Previous Release 中查询 点击 Releases 就能跳转到对应的下载界面 或者直接在地址上面输入点击 enter 也能获取 PS建议 node-js 的版本最好在 16 以上
点击对应的包即可下载完成 下载好安装程序包之后只需要双击打开即可进行安装 node 的安装也是傻瓜式的一直 next 即可 然后点击 finsh
检测 node-js 是否安装成功只需要 win R 调起 运行命令框输入 cmd 打开 cmd窗口再输入 node -v 查看 node 的版本如果有显示版本信息就表明 node-js 安装成功了 npm 是 node-js 的包管理和分发工具当安装完成 node-js 后 npm 也随之安装完成可以通过 npm -v 来校验是否安装成功 2. npm 镜像设置 在 vue 中经常会使用 npm 来安装一些包而 npm 的下载镜像是在国外所以使用 npm 下载会非常的慢这里有两种方式来解决这个问题 方式一使用 yarn 进行安装 使用 yarn 安装就需要保证当前系统有下载过 yarn同样可以在 cmd窗口 中输入 yarn -v 来检测是否安装过 yarn 如果没有就下载输入npm i -g yarn下载完成之后仍旧可以输入 yarn -v 来进行检测 方式二设置 npm 镜像为国内的 可以在 cmd窗口 中通过 npm config get registry 命令来查询 npm 所使用的镜像 默认使用的镜像是https://registry.npmjs.org/如果你 npm 所使用的镜像是这个的话就换成国内的比如 1https://registry.npm.taobao.org/ 2https://registry.npmmirror.com 比如我使用 https://npmmirror.com/ 所提供的镜像 https://registry.npmmirror.com 那就可以通过 npm config set registry https://registry.npmmirror.com 这行命令将镜像设置为 https://registry.npmmirror.com 即可
3. 安装 vs-code vue 推荐使用 Visual Studio Code 作为编辑器如果你之前用的是其它的编辑器进行开发建议换成 vs-code Visual Studio Code 下载https://code.visualstudio.com/Download 这个安装就不多做演示了 三、脚手架搭建
1. Vue-2 搭建 一安装 vue-cli
vue-cli 就是 Vue 的脚手架
vue-cli 官方文档https://cli.vuejs.org/zh/guide/ 可以看到目前 vue-cli 已经处于 维护模式 了但并不影响对它的使用
从官方文档上可以看到安装 vue-cli 可以执行以下任一命令即可
npm install -g vue/cli或者
yarn global add vue/cli例如在 终端窗口 输入 npm install -g vue/cli 进行安装 可以通过 vue --version 查看是否安装成功 如果能看到版本信息就表明安装成功 升级 vue-cli 如果是通过 npm install -g vue/cli 进行安装的那么就用 npm update -g vue/cli 进行升级如果是通过 yarn global add vue/cli 进行安装的那么就用 yarn global upgrade --latest vue/cli 进行卸载 卸载 vue-cli 如果是通过 npm install -g vue/cli 进行安装的那么就用 npm uninstall -g vue/cli 进行卸载如果是通过 yarn global add vue/cli 进行安装的那么就用 yarn global remove vue/cli 进行卸载 二搭建脚手架
可以建一个空白文件夹来存放项目在该文件夹下调出 终端窗口 然后输入以下命令创建项目
vue create product-nameproduct-name 表示创建项目的名称值得注意的是 项目名称不能出现大写字母如myApp
例如创建一个名为 my-vue2 的项目
输入 vue create my-vue2 命令现在默认是创建 vue-3 的脚手架可以通过 ↑ ↓ 键来选择所需创建 vue 脚手架的版本这里我就选择 Default[Vue 2] bale, eslint 选择之后点击 enter 就会开始自动搭建 到这里 vue-2 的脚手架就已经搭建完成了可以将创建完成的项目在 vs-code 当中打开 新建一个终端输入 npm run serve 命令运行项目即可 控制台输入以下内容表示成功 可以复制链接到游览器上查看http://localhost:8080/ 1. Vue-3 搭建 方式一
可以继续像 vue-2 搭建脚手架那种方式进行搭建下载 vue-cli只不过选择 Default[Vue 3] bale, eslint 其余步骤与 vue-2 搭建脚手架的步骤一样就不多做赘述
方式二
从官方文档中可知 使用 vue-3 node-js 的版本最好是在 16.0 以上
创建 vue-3 的脚手架不需要安装 vue-cli只需要输入以下命令即可
npm create vuelatest例如创建一个名为 my-vue3 的项目
在一个空白的文件夹下调出 终端窗口 输入 npm create vuelatest 命令接着输入项目名称 your project-name 然后一直按 enter 直至结束就能创建成功 同样也可以将创建好的项目拖动到 vs-code 中 打卡终端工具先输入 npm install 安装一些必要的包再 npm run serve 运行即可 可以复制链接到游览器上查看http://127.0.0.1:5173/
