VUE脚手架,安装与创建项目

109 阅读1分钟

VUE脚手架,安装与创建项目

首先 查看版本
$ npm -v
2.3.0

-升级 npm
cnpm install npm -g

-升级或安装 cnpm
npm install cnpm -g

打开终端(命令提示符、终端或者Shell)。
可以在文件路劲直接输入cmd
一,创建项目命令:vue create //创建项目名称
二,输入命令安装
vue create my-project
如果报错就是以管理员运行终端

C:\Users\admin\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\System Tools

右键管理员运行

三,选择直接要安装的VUE(版本)
命令执行后,Vue CLI会引导你选择一系列选项,比如预设(默认设置、手动选择特性等)、Vue版本、路由、状态管理等。

此图片的 alt 属性为空;文件名为 1713497049-image.png

完成选项设置后,Vue CLI会自动安装所需的依赖并创建项目。

此图片的 alt 属性为空;文件名为 1713497080-image.png

创建完成后,你可以通过以下命令启动开发服务器:

cd my-project

npm run serve

或者

yarn serve

然后浏览器访问http://localhost:8080/

此图片的 alt 属性为空;文件名为 1713497260-image.png

Vue脚手架的文件结构说明
├── node_modules
├── public
 ├── favicon.ico: 页签图标
 └── index.html: 主页面
├── src
 ├── assets: 存放静态资源
  └── logo.png
 │── component: 存放组件
  └── HelloWorld.vue
 │── App.vue: 汇总所有组件
 │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
├── package-lock.json:包版本控制文件