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
修改端口号
目录
相关文章
|
JavaScript
vue3安装组件
vue3安装组件
40 0
|
2月前
|
JavaScript
Vue Cli 脚手架安装
本文介绍了如何使用npm和cnpm淘宝镜像加速来安装Vue CLI脚手架工具,并验证安装成功。接着,通过Vue CLI创建新项目,并启动项目服务。
Vue Cli 脚手架安装
|
5月前
|
JavaScript 前端开发 测试技术
使用 Vue CLI 脚手架生成 Vue 项目
通过 Vue CLI 创建 Vue 项目可以极大地提高开发效率。它不仅提供了一整套标准化的项目结构,还集成了常用的开发工具和配置,使得开发者可以专注于业务逻辑的实现,而不需要花费大量时间在项目配置上。
127 7
使用 Vue CLI 脚手架生成 Vue 项目
|
4月前
|
JavaScript
青戈大佬安装Vue,无Eslint安装版,vue2安装,vue2无eslint,最简单配置Vue安装资料
青戈大佬安装Vue,无Eslint安装版,vue2安装,vue2无eslint,最简单配置Vue安装资料
|
4月前
|
JavaScript
Vue2和Vue3的安装,vue2的安装和初始化配置
Vue2和Vue3的安装,vue2的安装和初始化配置
|
JavaScript
Vue3.0实现todolist(Vue3.0环境搭建)
Vue3.0实现todolist(Vue3.0环境搭建)
73 1
|
6月前
|
JavaScript 前端开发 测试技术
Vue CLI的介绍【vue利器之一】
Vue CLI的介绍【vue利器之一】
73 0
|
11月前
|
JavaScript
vue2配置vite
vue2配置vite
90 0
|
JavaScript 前端开发 编译器
Vue安装脚手架 vue-cli
Vue安装脚手架 vue-cli
172 0
|
JavaScript
Vue的安装
如果直接用script标签引入,Vue会被注册为一个全局变量。 直接引入分为 1.开发版本 2.生产版本