安装Vue脚手架

原创已于 2024-08-23 11:00:44 修改 · 299 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2021-04-08 10:06:39 首次发布

本文详细介绍了如何修改NPM全局安装路径，安装Vue-cli，使用脚手架创建Vue项目，并提供了项目结构的简介。首先查看并更改全局安装路径，接着安装Vue-cli，然后在指定目录下创建项目，通过一系列步骤配置并启动项目，最后解析了项目的主要目录结构。

修改NPM全局安装的默认路径（不要轻易操作）

查看当前的全局安装路径

npm config ls

安装指定的目录安装node.js，例如： c:\nodejs。

node.js安装完成之后，需要在 c:\node.js 目录下创建两个文件夹：

c:\nodejs\node_global
c:\nodejs\node_cache

文件夹创建成功后，执行命令：

# 配置默认的全局安装路径
npm config set prefix "c:\nodejs\node_global"
npm config set cache "c:\nodejs\node_cache"

# 配置默认的镜像
npm config set registry https://registry.npm.taobao.org

执行成功后，再次运行 npm config ls 查看是否配置成功，如果没有问题，将以下两个目录配置到全局系统变量中：

c:\nodejs
c:\nodejs\node_global

以上步骤执行完成后，可以尝试一下是否能安装到指定的目录，例如：

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

cnpm 下载完成后，去 c:\nodejs\node_global 目录下查看是否安装成功。

安装Vue-cli脚手架

安装命令：

cnpm i @vue/cli -g

使用脚手架创建项目

先创建管理项目的目录，例如： d:\prject ，目录创建完成后，在该目录下打开命令行工具。

执行：

vue create 项目名

按照以下步骤执行：

第1步：自定义安装还是使用默认安装

第2步：选择安装的模块

第3步：选择Vue的版本，使用2.x

第4步：选择路由模式是否为history模式

第5步：配置文件的类型

第6步：是否将安装流程保存为安装模板

上面步骤执行完成后，依次按回车，会进入下载的步骤。

如果中间没有报错信息，即项目安装成功，然后执行：

# 进入项目
cd myapp

# 启动项目
npm run serve

项目启动成功

打开浏览器，在地址栏输入 http://localhost:8080 即可打开项目。

项目结构介绍

- node_modules 依赖管理目录
- public 本地服务器的根目录，用于存放静态文件，例如HTML、css、图片等
- src 源码目录
	|-- assets 静态资源文件，用于存放图片
	|-- components 用于管理公共组件的目录
	|-- router 管理路由的目录
	|-- store 全局状态管理目录
	|-- views 视图组件管理目录
	|-- App.vue 根组件
	|-- main.js 项目入口文件，用于引入全局依赖或全局配置
- package.json NPM的配置文件

管理路由的目录
|-- store 全局状态管理目录
|-- views 视图组件管理目录
|-- App.vue 根组件
|-- main.js 项目入口文件，用于引入全局依赖或全局配置