Vue学习——使用vue-cli搭建一个简单的本地vue项目
前提
- 安装好node.js、npm、vue-cli。为什么要先安装这些,建议查看https://www.cnblogs.com/zuiyue_jing/p/10673875.html,这个对于vue-cli理解很重要。
步骤
- 安装node.js
- 搜索node.js进入官网,直接下载node.js安装即可。
- 安装好之后,打开控制台,输入node -v命令,命令行显示出node.js版本就安装成功。
- Next
- 搜索node.js进入官网,直接下载node.js安装即可。
- 安装npm
- 安装好node.js之后,npm自动安装好。安装好之后,打开控制台,输入npm -v命令,命令行显示npm版本就安装成功。
- Next
- 安装好node.js之后,npm自动安装好。安装好之后,打开控制台,输入npm -v命令,命令行显示npm版本就安装成功。
- 安装vue-cli
- 进入cmd控制台,输入命令npm config set registry https://registry.npm.taobao.org(网速好,此步骤可省略,直接进入到下一步)
- 进入cmd控制台,输入命令npm install -g vue-cli安装vue-cli。
- 安装好之后,输入命令vue -V(注意V大写)查看vue-cli是否安装成功)。
- Next
- 创建项目
- 打开cmd,进入想要创建项目的目录
- 进入目录后,输入命令 vue init webpack project-name
- project-name是你打算创建vue项目的名称
- project-name是你打算创建vue项目的名称
- 输入命令之后,cmd会自动下载webpack模板,然后出现几个关于项目信息配置的步骤,依次输入即可
- Project name:项目名称,此处你可以选择更改,直接按下回车键,自动默认为初始输入的项目名称test-project
- Project description:项目描述,自己输入
- Author:项目开发人员
- Vue build:项目构建模式,默认即可,按下回车
- Install vue-router:项目是否安装vue路由,选择yes,进行安装
- Use ESLint to lint your code:是否选择ESLint开发验证功能,新手选择no
- Set up unit tests:是否开启单元测试,建议选择y,在后期开发中一定会用到的
- Pick a test runner:选择开启单元测试,就会有选择测试方式,默认即可
- Setup e2e tests with Nightwatch:是否开启e2e测试,选择no
- Should we run 'npm install' for you after the project has been created
- Yes,use NPM:选择这个代表在项目初始化后,会自动使用NPM联机下载项目所需要的插件
- Yes,use Yarn:择这个代表在项目初始化后,会自动使用Yarn联机下载项目所需要的插件
- No,I will handle that myself:后期手动下载项目所需要插件
- 网速好,建议选择“Yes,use NPM”,网速不好,建议选择“No,I will handle that myself”
- 项目创建之后,我们可以看到文件目录如下
- 注意,红色框标记的文件夹,如果在创建项目时,没有选择“Yes,use NPM”,这个文件夹是不存在的。
- Next
- 安装插件(如果在创建项目时最后一步选择“Yes,use NPM”,此步骤可略过)
- cmd进入到项目根目录,输入命令npm install,开始自动下载项目所需插件。
- 插件下载完成后,你讲会看到上面的完整项目目录。
- 运行项目
- cmd进入到项目根目录,输入命令npm run dev,如下图
- 浏览器访问http://localhost:8080/,出现下图项目搭建成功,在此基础上开发自己想要的项目即可。
- Next
- cmd进入到项目根目录,输入命令npm run dev,如下图
- Next
分类:
前端开发
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」