完整搭建一个vue项目

Posted 2021-02-05 咕噜噜~

目录

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