完整搭建一個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 webpack@<version> -g
# 例如:
npm install webpack@3.4.1 -g

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