Vue项目的搭建和启动

安装完成后，测试下 nodejs 和 npm 是否安装成功！
在这里插入图片描述

1.3 修改 模块 下载 位置

npm get prefix
C:Users14156AppDataRoamingnpm
npm get cache
C:Users14156AppDataLocalnpm-cache

②在 nodejs 安装目录下，创建 “node_global” 和 “node_ca c he” 两个文件夹
在这里插入图片描述

③修改默认文件夹

# 设置全局模块的安装路径到 “node_global” 文件夹，
npm config set prefix "D:node.jsnode_global"
# 设置缓存到 “node_cache” 文件夹
npm config set cache "D:node.jsnode_cache"

④将【node_global】加入到【系统变量】下的【PATH】变量中
在这里插入图片描述

⑤测试默认位置是否更改成功

npm install express -g

注意：“-g” 等同于 “–global”，“-g” 是全局安装，不加 “-g” 就是默认下载到当前目录。“-g” 表示安装到之前设置的【node_global】目录下，同时 nodejs 会自动地在 node_global 文件夹下创建【node_modules】子文件夹，在下面下载 exp res s 文件。
注意：如果报错，则可能是权限问题。我们需要将 node_cache、node_global、node_modules 这三个子文件以及 nodejs 根目录的权限全部打开。

1.4 设置 淘宝 镜像

方案一：将 npm 默认的 registry 修改为淘宝 registry

# 查看当前使用的镜像路径
npm config get registry
# 更换npm为国内镜像
npm config set registry https://registry.npm.taobao.org

方案二：全局安装基于淘宝源的 cn pm

npm install -g cnpm --registry=https://registry.npm.taobao.org

回到目录…

二、创建 启动 Vue

方案一：直接用 <script> 标签引入，Vue 会被注册为一个全局变量，这种方式是免安装的。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

方案二：通过 NPM 安装 Vue，在用 Vue 构建大型应用时推荐使用 NPM 安装。(需要提前安装15.0以上版本的node.js)

npm init vue@latest

在这里插入图片描述
接着进入项目目录，就可以安装依赖和启动服务器了：

cd first_vue
npm install
npm run dev

启动成功，就可以访问到该页面了。
在这里插入图片描述

回到目录…

三、开发环境 VSCode

官网：https://code.visualstudio.com

3.1 开发 插件

中文插件：Chin ese (Simp lified) (简体中文)
Vue代码高亮插件：Vue Volar extens ion Pack
Vue代码高亮插件：Vue Volar extens ion Pack
浏览器实时预览插件：Live Server

3.2 Vue 项目结构

.vscode		    --- vscode工具的配置文件
node_modules    --- vue项目的运行依赖文件，是 npm install 的执行结果
public          --- 资源文件夹（浏览器图标)
src             --- 源码文件夹
.gitignore      --- git忽略文件
index.htm1      --- 入口HTML文件
package.json    --- 信息描述文件
README.md       --- 注释文件
vite.config.js  --- Vue配置文件