正文 

当前位置： 首页 > 开发 > java教程

完整搭建一个vue项目(代码片段)

咕噜噜~ 咕噜噜~     2022-11-28     600

关键词：

目录

一. 搭建一个vue项目的完整步骤

1.安装node.js

下载地址

# 检查是否安装成功
node -v
npm -v

2.为了提高下载效率,可以使用淘宝镜像

# 淘宝镜像
npm install -g cnpm -registry=https://registry.npm.taobao.org

# 检查是否安装成功
cnpm -v

3.安装webpack打包工具

webpack中文文档

npm install webpack webpack-cli -g

4.安装vue-cli脚手架

# 全局安装最新版本
npm install -g @vue/cli

# 检查版本
vue -V

5.创建vue项目

# 命令:
vue create 项目名

# 1. Please pick a preset:
Manually select features

# 2. check the features needed for your project:
Babel  Router  Linter/Formatter

# 3. Use history mode for router?(Y/n)?
n

# 4. Pick a linter/formatter config:
ESLint with error prevention only

# 5. Pick additional lint features:
Lint on save

# 6. Where do you prefer placing config for Babel,PostCSS,ESLint,etc.?
In package.json

# 7. Save this as a preset for feature projects?(y/N)
y

# 8. Save preset as:
my_vue

注意: 或者直接使用图形化界面创建vue项目

vue ui

然后根据页面提示创建项目.

6.安装axios

# 1. cd到项目目录下

# 2. 执行以下命令
npm install axios --save

7.安装element-ui

# 1. cd到项目目录下

# 2. 执行以下指令
npm i element-ui --save

二. 卸载vue-cli

# 全局安装:
npm install vue-cli -g

# 全局卸载:
npm uninstall vue-cli -g

# 查看vue版本:
vue -V
# 或者:
vue --version

三. 完全卸载webpack

# 在全局下安装:
npm install webpack -g
# 新版本的的webpack需要搭配webpack-cli一起安装:
npm install webpack webpack-cli -g

# 安装指定版本:
npm install [email protected]<version> -g
# 例如:
npm install [email protected] -g

# 在全局下删除:
npm uninstall webpack -g

如何搭建一个vue项目(完整步骤)(代码片段)

参考：https://www.cnblogs.com/haitaoli/p/10304193.html一、安装node环境　　1、下载地址为：https://nodejs.org/en/　　2、检查是否安装成功：如果输出版本号，说明我们安装node环境成功　　　　3、为了提高我们的效率，可以使用淘宝的镜像：... 查看详情

如何搭建一个vue项目(完整步骤)(代码片段)

参考资料一、安装node环境　　1、下载地址为：https://nodejs.org/en/　　2、检查是否安装成功：如果输出版本号，说明我们安装node环境成功　　　　3、为了提高我们的效率，可以使用淘宝的镜像：http://npm.taobao.org/　　输入：npminsta... 查看详情

五分钟掌握用vue脚手架搭建一个完整项目！(代码片段)

1.在搭建项目之前，先安装淘宝镜像和命令行工具，可能需要等待一段时间（电脑安装过一遍之后，以后建项目时就不需要再安装）：    a.Win+R打开命令提示行cmd；        b.进入命令行cmd，... 查看详情

@vue/cli3.0快速搭建项目详解(代码片段)

...享给大家。一、介绍VueCLI是一个基于Vue.js进行快速开发的完整系统。有三个组件：CLI：@vue/cli 全局安装的npm包，提供了终端里的vue命令（如：vuecreate、vueserve、vueui等命令）CLI服务：@vue/cli-service是一个开发环境依赖。构建于&n... 查看详情

vuecli3.0快速搭建项目详解(代码片段)

一、介绍VueCLI是一个基于Vue.js进行快速开发的完整系统。有三个组件：CLI：@vue/cli 全局安装的npm包，提供了终端里的vue命令（如：vuecreate、vueserve、vueui等命令）CLI服务：@vue/cli-service是一个开发环境依赖。构建于 webpack&nbs... 查看详情

asp.netmvc三层搭建一个完整的项目(代码片段)

接下来用 asp.netmvc三层搭建一个完整的项目：   架构图:  使用的数据库: 一张公司的员工信息表，测试数据  解决方案项目设计： 1.新建一个空白解决方案名称为Company 2.在该解决方案下,新... 查看详情

前后端分离项目实战从零构建后一个完整的后台项目之vue的学习(代码片段)

文章目录一）什么是vue？1、渐进式框架是什么意思？2、为什么用vue而不是其他的前端框架？目前流行的前端框架：1）渐进式对比Angular：对比React：2）其他优势二）vue开发环境的搭建1、安... 查看详情

前后端分离项目实战从零构建后一个完整的后台项目之vue的学习(代码片段)

文章目录一）什么是vue？1、渐进式框架是什么意思？2、为什么用vue而不是其他的前端框架？目前流行的前端框架：1）渐进式对比Angular：对比React：2）其他优势二）vue开发环境的搭建1、安... 查看详情

搭建项目学习框架（三，创建一个完整电商项目）(代码片段)

目录项目的构建思路格局创建的思路进行创建模块首先下实现父文件的配置文件，也就是pom.xml文件（xxx_parent_demo0319文件夹下）配置xxx.pojo（配置项目所有实体类）配置pom.xml文件（xxx.pojo）配置xxx.dao文... 查看详情

搭建第一个vue项目以及项目的配置(代码片段)

今天开始学Vue啦！（一）在vue搭建之前一定先要安装node.js，因为vue的运行是要依赖于node的npm管理工具来实现的，我下载的都是最新版本，地址：https://nodejs.org/zh-cn/download/查看node和npm是否安装成功：node-v  和   ... 查看详情

如何搭建一个vue项目(代码片段)

一、安装node环境　　1、下载地址为：https://nodejs.org/en/　　2、检查是否安装成功：如果输出版本号，说明我们安装node环境成功　　　　3、为了提高我们的效率，可以使用淘宝的镜像：http://npm.taobao.org/　　输入：npminstall-gcnpm–r... 查看详情

跑动一个vue项目的完整步(代码片段)

一、配置vue环境这里可以参见别人写好的一篇，个人感觉非常详尽https://www.jianshu.com/p/4f744c935e1c值得注意的是在配置项目的名称以及一些相关属性的时候，以下两项要特别注意Projectname这里设置的名称会在项目的title中展示，如果... 查看详情

vue+elementui搭建后台项目(代码片段)

前言之前有些过移动端的项目搭建的文章，感觉不写个pc端管理系统老感觉少了点什么，最近公司项目比较多，恰巧要做一个申报系统的后台管理系统，鉴于对vue技术栈比较熟悉，所以考虑还是使用vue技术栈来做；看过一个不错... 查看详情

使用vue脚手架(vue-cli)从零搭建一个vue项目(代码片段)

注：在搭建项目之前，请先安装一些全局的工具（如：node，vue-cli等）node安装：去node官网（https://nodejs.org/en/）下载并安装node即可，安装node以后就可以正常使用npm命令全局安装vue-cli工具：npminstallvue-cli-g开始创建项目：找一个合... 查看详情

vue-用vue-cli从零开始搭建一个vue项目(代码片段)

...注DOM，只需要将数据组织好即可。本文用Vue-cli从零开始搭建一个Vue项目。准备工作1、下载安装Node 查看详情

vue全家桶+egg从0开发大型项目搭建项目(代码片段)

...ue+vue-router+vuex+vue-i18n+element-ui+egg+sequelize前端就用vue-cli3来搭建，后端就用egg-init来搭建， 查看详情

vue2.0-下载安装vue,搭建第一个项目(代码片段)

Vue.js是什么Vue(读音/vju?/，类似于 view)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另... 查看详情

vue系列一：vue入门：搭建脚手架cli（新建自己的一个vue项目）(代码片段)

...绍官方说明：Vue提供了一个官方的CLI，为单页面应用快速搭建(SPA)繁杂的脚手架。它为现代前端工作流提供了batteries-included的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时lint校验，以及生产环境可用的构... 查看详情