完整搭建一个vue项目

目录

  • 一. 搭建一个vue项目的完整步骤
  • 二. 卸载vue-cli
  • 三. 完全卸载webpack

一. 搭建一个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

原文地址:https://www.cnblogs.com/haitaoli/p/10305489.html

时间: 2024-10-10 21:54:48

完整搭建一个vue项目的相关文章

vue-用Vue-cli从零开始搭建一个Vue项目

Vue是近两年来比较火的一个前端框架(渐进式框架吧). Vue两大核心思想:组件化和数据驱动.组件化就是将一个整体合理拆分为一个一个小块(组件),组件可重复使用:数据驱动是前端的未来发展方向,释放了对DOM的操作,让DOM随着数据的变化自然而然的变化(尤神原话),不必过多的关注DOM,只需要将数据组织好即可.本文用Vue-cli从零开始搭建一个Vue项目. 准备工作 1.下载安装Node.js 下载地址:https://nodejs.org/en/download/ ,选择合适自己的版本下载即可

如何搭建一个vue项目(完整步骤)

参考资料 一.安装node环境 1.下载地址为:https://nodejs.org/en/ 2.检查是否安装成功:如果输出版本号,说明我们安装node环境成功 3.为了提高我们的效率,可以使用淘宝的镜像:http://npm.taobao.org/ 输入:npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了. 检查是否安装成功: 二.搭建vue项目环境 1

使用vue-cli脚手架自动化搭建一个vue项目

最近在学习使用vue,简单汇总下如何使用vue-cli脚手架自动化搭建一个vue项: 1.首先,要安装node.js,之后第一步检测是否安装node:没有安装node的同学请到官网下载安装 https://nodejs.org/en/download/ 安装成功后在命令行查看node版本,如果有说明安装成功. 2.之后全局安装vue-cli脚手架 电脑进入cmd,任意路径下 使用 npm命令:npm install vue-cli -g 注意:npm -v 3.0+   npm版本需要在3.0之

抛开vue-cli 利用requireJS搭建一个vue项目

---恢复内容开始--- 现在学习vue都是利用脚手架vue-cli快速搭建一个项目,这是非常高效的方法,我是十分推荐的,但是有时候在没有互联网的情况,我们没办法在node环境下,敲一个nmp install XXX帮我们搭建系统.这边也遇到了这样的情况,记录一下过程,备忘. 采用的方式是利用requireJS搭建一个遵循AMD规则的vue项目.关于这一块,大家可以百度一下,查询相关资料熟悉requireJS的使用. 第一步,都是建立一个如下常规的简单的工程结构: ----lib 存放js库文件

如何快速搭建一个vue项目(详细)

第一步:安装node.js 1.下载地址为:https://nodejs.org/en/ 2.安装node.js 3.安装完之后查看版本号:node -v 至此,node.js安装完毕. 第二步:安装vue-cli 1.vue-cli官网:https://cli.vuejs.org/zh/guide/installation.html 2.安装vue-cli,可以使用下列任一命令安装这个新的包: 3.查看vue-cli是否安装成功:vue -version 到此vue-cli安装完成. 第三步:

使用Vue脚手架(vue-cli)从零搭建一个vue项目

注:在搭建项目之前,请先安装一些全局的工具(如:node,vue-cli等) node安装:去node官网(https://nodejs.org/en/)下载并安装node即可,安装node以后就可以正常使用npm命令 全局安装vue-cli工具:npm install vue-cli -g 开始创建项目: 找一个合适的位置,打开命令窗口,使用vue初始化基于webpack的新项目 vue init webpack vue-demo //注意名称太长的话它会有错误提示,就像VueDemo 我们可

VUE系列一:VUE入门:搭建脚手架CLI(新建自己的一个VUE项目)

一.VUE脚手架介绍 官方说明:Vue 提供了一个官方的 CLI,为单页面应用快速搭建 (SPA) 繁杂的脚手架.它为现代前端工作流提供了 batteries-included 的构建设置.只需要几分钟的时间就可以运行起来并带有热重载.保存时 lint 校验,以及生产环境可用的构建版本.更多详情可查阅 Vue CLI 的文档. 个人理解:在实际开发中都是通过脚手架快速搭建一个vue项目,当然也可以使用CDN的方式(具体请看官网) 使用脚手架的好处: 1. 脚手架是通过webpack搭建的开发环境

一、vue:如何新建一个vue项目

比较好用的一个脚手架:https://a1029563229.gitbooks.io/vue/content/cooking-cli.html 创建一个vue项目的流程: 1.安装node,版本号必须是3.0.0以上 2.python 2.7.* 3.安装淘宝镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org 4.cnpm i cooking-cli -g //npm install -g vue-cli 5. co

我的第一个vue项目

作为一个研一的学生,一开始对vue框架这个概念也仅限于听说过.正打算在研一下半学期学习了解一下vue框架,正巧在此时实验室接手了一个全新的项目,于是我就全身心投入到了vue的研究中.下面是我总结的一些我的第一个vue项目的过程.问题等等. 首先要先搭建一下vue运行环境: 1.下载node.js  (http://www.runoob.com/nodejs/nodejs-install-setup.html) 2.基于node.js,利用淘宝npm镜像安装相关依赖,在cmd里直接输入:npm i