(精华)2020年7月12日 vue vue-cli脚手架的使用
【摘要】
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
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
全局卸载 :yarn global remove @vue/cli
2.2 初始化项目,生成项目模板
vue-cli
vue-cli 2语法:vue init 模板名 项目名
@vue/cli 3 -4
语法:vue create 项目名
2.3 进入生成的项目目录,安装模块包
cd vue-cli2-demo
npm install
2.4 运行
vue-cli版本创建的项目:
npm run dev //启动测试服务
npm run build //将项目打包输出dist目录,项目上线的话要将dist目录拷贝到服务器上
@vue/cli版本 创建的项目
npm run serve //启动开发服务
npm run build //将项目打包输出dist目录,项目上线的话要将dist目录拷贝到服务器上
ESLint是用来统一代码规范和风格的工具,如缩进、空格、符号等,要求比较严格
2.5 使用图形化界面
你也可以通过 vue ui 命令以图形化界面创建和管理项目:
vue ui
三、模块化开发
2. axios模块化
npm install axios -S
vue-cli3-demo 项目里
使用axios的两种方式:
方式1:在每个组件中引入axios ,
import axios from 'axios';
getInfo(){
axios.get('https://api.github.com/users/fly39244080').then((res)=>{
console.log(res);
})
}
方式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);
})
}
3. 为自定义组件添加事件
二、 Element UI
1. 简介
Element UI是饿了么团队提供的一套基于Vue2.0的组件库,可以快速搭建网站,提高开发效率
ElementUI PC端
MintUI 移动端
2. 快速上手
2.1 安装elment ui
cnpm install element-ui -S
2.2 在main.js中引入并使用组件
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css' //该样式文件需要单独引入
Vue.use(ElementUI);
这种方式引入了ElementUI中所有的组件
2.3 在webpack.config.js中添加loader
CSS样式和字体图标都需要由相应的loader来加载,所以需要style-loader、css-loader
默认并没有style-loader模块,所以需要单独安装
cnpm install style-loader --save-dev
2.4 使用组件
2.5 使用less
安装loader,需要两个:less、less-loader
cnpm install less less-loader -D
在webpack.config.js中添加loader
3. 按需引入组
3.1 安装babel-plugin-component
cnpm install babel-plugin-component -D
3.2 配置.babelrc文件
"plugins": [["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}
]]]
3.3 只引入需要的插件
文章来源: codeboy.blog.csdn.net,作者:愚公搬代码,版权归原作者所有,如需转载,请联系作者。
原文链接:codeboy.blog.csdn.net/article/details/107305332
【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)