Vue.js之使用vue-cli初始化项目

2024-06-01 11:49:37

一、安装步骤

step1、安装Node.js

首先需要下载并安装Node.js，下载地址：Node官网。
可查看我的另外一篇文章，仅作参考：Node.js入门及安装

测试安装是否成功，打开cmd，使用 node -v，如果显示版本号则表示安装成功。

step2、安装vue-cli

使用vue-cli（脚手架）搭建项目，vue-cli是Vue官方提供的用于搭建基于 vue+webpack+es6项目的脚手架工具。
GitHub地址：vue-cli

全局安装：-g 表示全局安装vue-cli

npm install -g vue-cli

如果安装较慢，可以使用淘宝镜像安装。

cnpm install -g vue-cli

step3、初始化项目

初始化基于webpack的模板项目，projectName为项目名称，可以自动生成目录及相关文件，跟express生成器差不多。

vue init webpack projectName

在初始化的过程中会询问一些相关的说明和配置，这些说明和配置会写入package.json文件中，会自动生成对应的模块。

如果需要使用ESLint规范和相关的unit test 和e2e，请输入yes，这样初始化出来的项目，会自动配置好对应的模块。

step4、下载项目依赖模块

定位到项目根目录，下载项目依赖的所有模块。

npm install

step5、运行项目

定位到项目根目录下，使用命令：

npm run dev

使用命令运行项目，在浏览器中输入http://localhost:8080可访问。

整体过程：

# 全局安装 vue-cli
npm install -g  vue-cli# 创建一个基于 webpack 模板的新项目
vue init webpack projectName# 安装依赖，先定位到项目根目录，然后安装
cd  projectName
npm install#运行项目
npm run dev

二、目录说明

项目文件需要放到 src 文件夹下，相关的部分静态资源需要放在static文件夹下。

项目开发完成之后，可以输入 npm run build 来进行打包工作

npm run build

打包完成后，会生成 dist 文件夹，如果已经修改了文件路径，可以直接打开本地文件查看

项目上线时，只需要将 dist 文件夹放到服务器就行了。

转载于:https://www.cnblogs.com/YYW303/p/9490579.html

Vue.js之使用vue-cli初始化项目相关推荐

解答网友提问 | 使用VS2022快速生成React/Angular/Vue.js + Web API前后端集成项目
前言上次发表了<一键生成Vue.js + Web API前后端集成项目>后,有多位网友来问,有不有其他的前后端集成模板: 实际上,VS2022没有提供前后端集成项目模板. 但是,使用VS ...
一键生成Vue.js + Web API前后端集成项目
前言默认情况下,Visual Studio提供了"基于Vue.js Web 应用程序"项目模板,可以生成Vue.js前端项目. 你需要另外创建Web API项目,调试时需要同时启 ...
Vue.js 最新官方下载地址与项目导入
目录 VUE2下载网址 VUE2使用示例: VUE3下载与使用 VUE3示例: 在官网上下载vue.js或者是vue.min.js.并用<script>标签引入. 应小伙伴要求区分一下版本 ...
推荐 7 个 Vue.js 插件，也许你的项目用的上（四）
加速你的 Vue.js 开发当我们可以通过使用库轻松实现相同的结果时,为什么还要编写自定义功能?开发人员最好的朋友和救星就是这些第三方库.我相信一个好的项目会利用一些可用的最佳库.Vue.js 是创 ...
推荐 7 个 Vue.js 插件，也许你的项目用的上（三）
使用这7个库 Vue.js 库,加快你的项目开发! 当我们可以通过使用库轻松实现相同的结果时,为什么还要编写自定义功能?开发人员最好的朋友和救星就是这些第三方库.我相信一个好的项目会利用一些可用的最佳 ...
# vue.js 之对vue.js基础理解
vue.js 之对vue.js基础理解 Vue构造器 1 . Vue.js是一个构造函数,编程中称之为构造器 2 . 每一个new Vue() 都是一个Vue构造函数的实例,这个过程叫做实例化 3 ...
Vue 脚手架CLI 初始化项目
1 介绍 CLI是Command-Line Interface,翻译为命令行界面,但是俗称脚手架. Vue CLI是一个官方发布vue.js项目脚手架使用vue-cli可以快速搭建vue开发环境以及 ...
浏览器下载安装vue js devtools调试vue项目
下载vue js devtools插件的方式: 推荐网址: 1.https://www.extfans.com/ 2.百度下载谷歌浏览器助手插件,直接进入谷歌网上应用商店进行下载 3.https:// ...
springboot+vue.js+mysql+基于VUE框架的商城综合项目自动化系统的实现毕业设计-附源码051018
商城综合项目自动化系统摘要目前电商系统商城项目管理极其频繁,迫切地需要自动化测试来代替人工繁琐而又重复的劳动.自动化测试相关的研究已经很多,但多数只是针对某一方面,比如单一接口或者单一页面或者性 ...
（附源码）springboot+vue.js+mysql+基于VUE框架的商城综合项目自动化系统的实现毕业设计051018
商城综合项目自动化系统摘要目前电商系统商城项目管理极其频繁,迫切地需要自动化测试来代替人工繁琐而又重复的劳动.自动化测试相关的研究已经很多,但多数只是针对某一方面,比如单一接口或者单一页面或者性 ...

最新文章

热门文章