本文介绍了如何在Windows环境下安装NodeJS，配置npm全局路径和切换到淘宝镜像以加速下载。接着，通过Vue-cli快速创建Vue项目，详细说明了命令行和图形界面两种创建方式。项目创建后，解析了Vue的标准目录结构，并指导如何运行项目及修改端口号。最后，概述了Vue项目的基本开发流程，包括主要文件的作用和Vue组件的构成。
NodeJS安装-Vue模块化项目构建
一、环境准备（NodeJS安装）
1. 安装NodeJS
官网自行下载，并安装
2. 配置npm的全局安装路径
npm config set prefix "D:\soft_install\dev\qianduan_dir\nodejs"
3. 切换npm的淘宝镜像，提升资源下载速度
npm config set registry http://registry.npm.taobao.org
4. 安装Vue的脚手架Vue-cli（快速生成一个Vue项目的模板）
二、Vue模块化项目构建
1. 创建Vue项目
- 方式一：命令行，vue create hellovueproject
- 方式二：图像化界面，vue ui
创建Vue项目
2. Vue项目目录介绍
vue脚手架创建的项目，具有标准的目录结构
3. 运行vue项目
方式一：命令行
方式二：图像界面（使用vscode）
vue脚手架创建的项目，具有标准的目录结构
修改端口号：
三、Vue项目开发流程
1. 默认首页：index.html
2. 首页默认引入入口文件：main.js
3. App.vue组件文件（以.vue结尾的称为组件文件）
- vue组件组成：
- template：模板部分，生成HTML代码
- script：控制模块的数据来源和行为
- sytle： CSS样式部分
扫一扫
到【灌水乐园】发言
