Vue-cli入门教程

骑猪看日落 2023-01-14 07:59 116阅读 0赞

## 前言 ##

### 安装 `npm` ###

`npm` 全称为 `Node Package Manager`，是一个基于`Node.js`的包管理器，也是整个`Node.js`社区最流行、支持的第三方模块最多的包管理器。

npm -v

### 安装 `cnpm` ###

npm install -g cnpm --registry=https://registry.npm.taobao.org
    
    //由于网络原因安装cnpm，速度快

### 安装 `vue-cli` ###

cnpm install -g @vue/cli //3.0以后的版本
    
    npm install vue-cli -g //3.0以前的版本
    
    vue -V //查看版本
    
    npm uninstall vue-cli -g //卸载
    
    //1.命令 回车
    vue create 项目名
    //2.选择自定义配置  Manually select features 
    //3.选择你需要的配置
    Babel (必选)
    TypeScript（项目中使用ts开发的话，就勾选）
    Progressive Web App (PWA) Support  (接口缓存，优化项目)
    Router
    Vuex 
    CSS Pre-processors (css预处理器，需要)
    Linter / Formatter (代码格式，一般默认选中)
    Unit Testing (代码测试)
    E2E Testing（需求界面测试）
    //4.根据你选的配置进行Y/N选择
    //5.选择完之后，就可以运行项目  
    npm run serve

### 安装 `webpack` ###

`webpack` 是 `JavaScript` 打包器(module bundler)

cnpm install -g webpack

### 创建vue-cli项目 ###

vue create demo1
    demo1> vue add element //根目录安装Element-UI
    demo1> cnpm install axios --save //安装axios
    demo1> cnpm i -S echarts //安装ECharts
    
    //需要在 main.js中引入element-ui、axios、echarts和挂载
    import Element form 'element-ui'
    import "'element-ui/lib/theme-chalk/index.css"
    Vue.user(Element)
    
    import axios from 'axios' 
    Vue.prototype.$axios = axios
    
    import ECharts from 'echarts'
    Vue.prototype.$echarts = ECharts

## 第一步 ##

1、vue create project //创建项目
    2、cnpm install //安装 依赖
    // pnpm run build 
    3、npm run server //出现 http://localhost:8080/ 界面出现

## 第二步 ##

1、vue-cli > https://cli.vuejs.org/zh/
    
    2、Installed CLI Plugins  
    babel > https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel
    eslint > https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint
    
    3、Ecosystem 
    vue > https://cn.vuejs.org //vue官网
    vue-router > https://router.vuejs.org/zh/ //路由管理器
    vuex > https://vuex.vuejs.org/zh/ //状态管理模式
    vue-devtools > https://github.com/vuejs/vue-devtools#vue-devtools
    vue-loader > https://vue-loader.vuejs.org/zh/
    awesome-vue > https://github.com/vuejs/awesome-vue

## 前端工程化 ##

> 模块化相关规范
> 
> webpack
> 
> Vue单文件组件

> Vue-cli3
> 
> Element-UI

1、Vue脚手架的基本用法

vue脚手架用于快速生成Vue项目基础架构

官网 > http://cli.vuejs.org/zh

> npm install -g @vue/cli

2、基于3.x版本的脚手架创建vue项目

![image-20210420124442991][]

3、运行

> cd my-project
> 
> pnpm run serve

4、vue ui

任务 > server 用于开发

任务 > build

5、项目结构分析

node\_modules 依赖包目录

public 静态资源目录

src 组件源码目录

babel.config.js Babel配置文件

6、脚手架自定义配置

通过package.json配置项目

"vue": {
    	"devServer": {
    		"port": 8888,
    		"open": true
    	}
    }

![image-20210420131132108][]

**通过单独的配置文件配置项目**

在根目录vue.config.js 中
    
    module.exports = {
        devServer: {
            //自动打开浏览器
            open: true,
            port: 8888
        }
    }

7、Element-UI的基本使用

一套为开发者、设计师和产品经理准备的桌面端组件库

官网 >

基于Vue 2.x >

http://element-cn.eleme.io/\#/zh-CN

基于Vue3.x >

https://element-plus.org/\#/zh-CN

https://element-plus.gitee.io/\#/zh-CN

//基于命令行方式手动安装
    //安装依赖包 npm i element-ui -S
    //导入 Element-UI相关资源
    
    //导入组件库
    import ElementUI from 'element-ui';
    //导入组件相关样式
    import 'element-ui/lib/theme-chalk/index.css';
    //配置Vue插件
    Vue.use(ElementUI)

//基于图形化界面自动安装
    //运行vue ui命令，打开图形化界面
    //通过Vue项目管理器，进入具体的项目配置面板
    //点击插件->添加插件，进入插件查询面板
    //搜索vue-cli-plugin-element并安装
    //配置插件，实现按需导入，从而减少打包后项目的体积
    
    //同样的效果代码
    //在根目录下
    vue add element

[image-20210420124442991]: /images/20221022/00e05a1e91e645e39b6cb66592b1edcc.png
[image-20210420131132108]: /images/20221022/00175ab4aafd4f59a7bebedd1ecd43c6.png