1.Node.js环境搭建
我以gnvm为例进行windows系统的环境搭建,安装和使用参照官网地址:http://ksria.com/gnvm/?lang=zh-cn,mac系统可以去官网下载pkg包进行安装。
(1)下载并解压缩 gnvm.exe 保存到D:/Programs/nodejs,并将此文件夹加入到环境变量 Path。
(2)在cmd(我用的是第三方工具cmder)中输入gnvm version
查看版本号,看到版本信息,说明配置成功
(3)输入 gnvm config registry TAOBAO
更换淘宝源
(4)输入 gnvm config
查看配置,确认registry已换为淘宝源
(5)使用 gnvm search 15.*.*
查看该版本序列中Node.js与npm的版本对应关系。我决定安装15.8.0的Node.js,那么我需要安装7.5.1的npm。
(6)使用 gnvm npm 7.5.1
安装npm,安装完成后使用 npm -version
可以查看版本号是否正确
(7)使用 npm config get registry
查看npm的源
(8)使用 npm config set registry https://registry.npmmirror.com
更换淘宝源
(9)使用 gnvm install 15.8.0
安装Node.js
(10)使用 gnvm use 15.8.0
,将Node.js的版本切换至15.8.0
(11)使用 gnvm ls
,查看本地的全部Node.js版本
(12)使用 node --version
验证Node.js是否搭建完成
2.使用Vue CLI搭建项目
(1)使用 npm install -g @vue/cli
安装Vue CLI工具
(2)使用 vue --version
查看Vue CLI工具的版本,能看到版本信息说明工具安装完成。
(3)进入项目要存放的目录,使用 vue create clidemo1
创建项目
- 用键盘上下键选择手动配置项目
- 用空格键选中需要的配置
- 选择3.x版本
- 不用history模式配置路由
- 选择sass作为CSS预处理
- ESLint选择默认
- 选择保存时进行代码校验
- 选择使用单独的配置文件
- 不保留配置信息
- 项目创建成功,根据提示输入命令,运行项目
- 项目启动成功
- 在浏览器中输入地址,成功运行项目
3.使用Vite搭建项目
官方网址:https://vitejs.cn/
(1)使用 npm init vite
创建项目
(2)输入项目名称vitedemo1
(3)选择框架为Vue
(4)选择纯vue还是带是typescript的vue
(5)项目创建完成
(6)根据提示,输入指令安装运行,效果如下
4.创建我的第一个SFC
以clidemo1为例。
在HBuilderX中导入该项目,结构如下:
(1)右键点击Views文件夹,新建vue文件,取名FirstView.vue
(2)在FirstView.vue中编写代码
<template>
<h1>Hello Vue.js!</h1>
<div class="style1">{{msg}}</div>
</template>
<script>
export default {
data() {
return {
msg: '这是我的第一个SFC'
}
}
}
</script>
<style>
.style1{
color:green;
font-size:2rem;
}
</style>
(3)打开router下的index.js,增加一段代码,为新的页面配置路由
(4)打开App.vue,在首页上增加导航
(5)启动项目,运行网站,访问我创建的页面,成功!