(精华)2020年7月12日 vue vue-cli脚手架的使用

举报
愚公搬代码 发表于 2021/10/18 23:37:52 2021/10/18
【摘要】 vue-cli脚手架 https://cli.vuejs.org/zh/guide/installation.html 1. 简介 版本:2.x vue-cli是一个vue脚手架,可以快速构造项目结...

vue-cli脚手架

https://cli.vuejs.org/zh/guide/installation.html

1. 简介

版本:2.x
vue-cli是一个vue脚手架,可以快速构造项目结构
vue-cli本身集成了多种项目模板:
    simple  很少简单
    webpack 包含ESLint代码规范检查和unit单元测试等
    webpack-simple 没有代码规范检查和单元测试
    browserify 使用的也比较多
    browserify-simple

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

2. 示例,步骤:

2.1 安装@vue/cli (vue-cli),配置vue命令环境

version ---- 2.9.6版本

npm install vue-cli -g  或者 yarn global add vue-cli
vue --version
vue list

version ---- @vue/cli 4.1.2 

npm install -g @vue/cli   
# OR
yarn global add @vue/cli  ,或者指定版本安装 yarn global add @vue/cli@3

可以安装一个桥接工具拉取 2.x 模板 (旧版本)

npm install -g @vue/cli-init
 `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
 vue init webpack-simple webpack-simple-web
 vue init webpack vue-cli2-demo

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

全局卸载 :yarn global remove @vue/cli

2.2 初始化项目,生成项目模板

vue-cli
vue-cli 2语法:vue init 模板名  项目名  

@vue/cli 3 -4
语法:vue create 项目名

  
 
  • 1
  • 2
  • 3
  • 4
  • 5

2.3 进入生成的项目目录,安装模块包

cd vue-cli2-demo
npm install

  
 
  • 1
  • 2

2.4 运行

vue-cli版本创建的项目:
npm run dev  //启动测试服务
npm run build //将项目打包输出dist目录,项目上线的话要将dist目录拷贝到服务器上

@vue/cli版本 创建的项目
npm run serve   //启动开发服务
npm run build   //将项目打包输出dist目录,项目上线的话要将dist目录拷贝到服务器上

ESLint是用来统一代码规范和风格的工具,如缩进、空格、符号等,要求比较严格

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

官网

2.5 使用图形化界面

你也可以通过 vue ui 命令以图形化界面创建和管理项目:

vue ui

三、模块化开发

2. axios模块化

npm install axios -S

  
 
  • 1

vue-cli3-demo 项目里
使用axios的两种方式:
方式1:在每个组件中引入axios ,

    import axios from 'axios';
        getInfo(){
            axios.get('https://api.github.com/users/fly39244080').then((res)=>{
                console.log(res);
            })
         }

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

方式2:在main.js中全局引入axios并添加到Vue原型中

    import axios from 'axios';
    Vue.prototype.$axios = axios;
        getInfo(){
            this.$axios.get('https://api.github.com/users/fly39244080').then((res)=>{
                console.log(res);
            })
         }

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

3. 为自定义组件添加事件

二、 Element UI

1. 简介

Element UI是饿了么团队提供的一套基于Vue2.0的组件库,可以快速搭建网站,提高开发效率
    ElementUI  PC端
    MintUI 移动端

  
 
  • 1
  • 2
  • 3

官网

2. 快速上手

2.1 安装elment ui

cnpm install element-ui -S

  
 
  • 1

2.2 在main.js中引入并使用组件

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css' //该样式文件需要单独引入
Vue.use(ElementUI);
这种方式引入了ElementUI中所有的组件

  
 
  • 1
  • 2
  • 3
  • 4

2.3 在webpack.config.js中添加loader

CSS样式和字体图标都需要由相应的loader来加载,所以需要style-loader、css-loader
默认并没有style-loader模块,所以需要单独安装
cnpm install style-loader --save-dev

  
 
  • 1
  • 2
  • 3

2.4 使用组件

2.5 使用less

安装loader,需要两个:less、less-loader
cnpm install less less-loader -D
在webpack.config.js中添加loader    

  
 
  • 1
  • 2
  • 3

3. 按需引入组

3.1 安装babel-plugin-component

cnpm install babel-plugin-component -D  

  
 
  • 1

3.2 配置.babelrc文件

"plugins": [["component", [
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-default"
    }
]]]

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

3.3 只引入需要的插件

文章来源: codeboy.blog.csdn.net,作者:愚公搬代码,版权归原作者所有,如需转载,请联系作者。

原文链接:codeboy.blog.csdn.net/article/details/107305332

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。