vue-cli使用

简介: 利用vue-cli快速构建vue单页应用1.首先电脑上必须已经安装了npm和nodejs2.在确保电脑已经存在npm和nodejs的情况下,在命令行环境下安装vue-clinpm install vue-cli这里最好使用(国内的淘宝镜像)cnpm install vue-cli3.

利用vue-cli快速构建vue单页应用

1.首先电脑上必须已经安装了npm和nodejs

2.在确保电脑已经存在npm和nodejs的情况下,在命令行环境下安装vue-cli

npm install vue-cli
这里最好使用(国内的淘宝镜像)
cnpm install vue-cli

3.初始化项目(这里我选用webpack-simple模式除此之外还有好几个模式可以自行百度)

vue init webpack-simple vueclitest

4.进入到项目文件夹中

5.安装依赖

cnpm install

6.运行项目(这时浏览器自动打项目)

npm run dev

7.如果成功会显示如下界面

img_3d34d64a5e9b6e7408804e482284327e.png
效果图

<h3 style="color:red">注意:在你走到最后一步的时候可能会报如下错误(端口占用),这时你可以打开package.json文件修改里面的端口号</h3>


img_d964e7fc9836f8db5341f66e16a124b4.png
端口占用错误

img_2a922d6297f3ff2aa7bc1c348a46743d.png
修改端口号
目录
相关文章
|
3月前
|
JavaScript 数据可视化
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
这篇文章介绍了如何使用vue-cli 2和3版本来创建Vue项目,并详细说明了两者之间的主要区别。
136 5
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
|
2月前
|
资源调度 JavaScript 前端开发
一文带你了解和使用vue-cli(2024年11月)
欢迎来到我的博客!我是一名热爱前端技术的大一学生,自学JavaScript与Vue已两年半,目前正向全栈工程师迈进。如果你从我的博客中有所收获,欢迎关注我,我会持续更新更多优质内容,一起成长!🎉🎉🎉
63 0
一文带你了解和使用vue-cli(2024年11月)
|
8月前
vue-cli 3.0 配置
vue-cli 3.0 配置
61 0
|
JavaScript 前端开发 编译器
Vue安装脚手架 vue-cli
Vue安装脚手架 vue-cli
189 0
|
JavaScript 前端开发
Vue--Vue-CLI创建项目
Vue--Vue-CLI创建项目
|
JavaScript 数据可视化
Vue_cli2和Vue_cli3
Vue_cli2和Vue_cli3
107 0
|
缓存 JavaScript 前端开发
【vue2】Vue Cli脚手架与VueTools的安装详解
Vue Cli脚手架与VueTools的安装详解
【vue2】Vue Cli脚手架与VueTools的安装详解
|
JavaScript 前端开发 编译器
Vue学习笔记(九) Vue CLI
Vue学习笔记(九) Vue CLI
214 0
|
JavaScript
vue-cli学习笔记 01、vue-cli脚手架
vue-cli学习笔记 01、vue-cli脚手架
vue-cli学习笔记 01、vue-cli脚手架