Vue脚手架

Vue脚手架可以快速生成Vue项目基础的架构。

安装3.x版本的Vue脚手架
/*
npm install -g @vue/cli@3.3
*/
基于3.3版本的脚手架命令创建Vue项目
/*

     1.  命令:vue create my-project
选择Manually select features(选择特性以创建项目) 2. 勾选特性可以用空格进行勾选。 ? Please pick a preset: Manually select features
? Check the features needed for your project:
◉ Babel
◯ TypeScript
◯ Progressive Web App (PWA) Support
◉ Router
◯ Vuex
◯ CSS Pre-processors
❯◉ Linter / Formatter
◯ Unit Testing
◯ E2E Testing 3. ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n
是否选用历史模式的路由:n 4. ? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config:
ESLint with error prevention only
ESLint + Airbnb config
❯ ESLint + Standard config
ESLint + Prettier
ESLint选择:ESLint + Standard config 5. ? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection
)
❯◉ Lint on save
◯ Lint and fix on commit 何时进行ESLint语法校验:Lint on save 6. ? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection
)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
In dedicated config files
❯ In package.json
babel,postcss等配置文件如何放置:In dedicated config files(单独使用文件进行配置)
是否保存为模板:n 使用哪个工具安装包:npm cd 项目名
npm run dev
*/

基于UI界面创建Vue项目
/*
命令:vue ui
在自动打开的创建项目网页中配置项目信息。
*/

基于2.x的旧模板,创建Vue项目
/*
npm install -g @vue/cli-init
vue init webpack my-project
*/
分析Vue脚手架生成的项目结构
/*
node_modules:依赖包目录
public:静态资源目录
src:源码目录
src/assets:资源目录
src/components:组件目录
src/views:视图组件目录
src/App.vue:根组件
src/main.js:入口js
src/router.js:路由js
babel.config.js:babel配置文件
.eslintrc.js:
*/

Vue脚手架的自定义配置

/*
A.通过 package.json 进行配置 [不推荐使用]
因为package.json主要用来管理包的配置信息, 为了方便维护,推荐将vue脚手架相关的配置,单独定义到vue.config.js配置文件中.
"vue":{
"devServer":{
"port":"9990",
"open":true
}
}
B.通过单独的配置文件进行配置,创建vue.config.js
module.exports = {
devServer:{
port:8888,
open:true
}
}
*/

Element-UI简介

Element-UI安装

Element-UI:一套基于2.0的桌面端组件库

官网地址:http://element-cn.eleme.io/#/zh-CN

组件库

/*
npm install element-ui -S
*/
Element-UI导入使用
/*
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css"; Vue.use(ElementUI)
*/ // 复制一段element-ui代码到App.vue上
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>

使用请看官网文档,很详细

https://element.eleme.cn/#/zh-CN/component/quickstart

08 . Vue脚手架安装,使用,自定义配置和Element-UI导入使用的更多相关文章

  1. npm安装使用及vue脚手架安装

    公司在前端用vue开发项目,那就学习下啦,第一步,在安装vue-devtools过程中,npm作为官方manual installtion方式,肯定必不可少. NPM是随同NodeJS一起安装的包管理 ...

  2. vue开发搭建(npm安装 + vue脚手架安装)

    一.概念 1.npm:  Nodejs下的包管理器. 2.webpack: 它主要的用途是通过CommonJS的语法,把所有浏览器端需要发布的静态资源,做相应的准备,比如资源的合并和打包. 3.vue ...

  3. vue脚手架安装,新建项目,打包

    1.安装node.js 从node官网下载并安装node,安装步骤很简单,只要一路“next”就可以了. 2.安装cnpm 淘宝镜像 npm install -g cnpm --registry=ht ...

  4. vue脚手架安装步骤vue-cli

    1.环境搭建     安装node.js: 从node.js官网下载并安装node,安装过程很简单.  npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 $ npm -v 2.3 ...

  5. vue脚手架安装

    1. 脚手架:  如何:   1. 安装脚手架的工具命令:      npm i -g @vue/cli   电脑安装完命令后  :  直接创建  vue create 文件夹名字   2. 用命令反 ...

  6. vue 脚手架安装

    首先安装node.js npm 配置全局安装路径和缓存 node 安装路径下新建两个目录,node_cache和node_global npm config set prefix "E:\n ...

  7. vue-cli的项目中关于axios的全局配置,结合element UI,配置全局loading,header中做token传输

    在src目录中建立plugins文件夹,在文件夹内建立axios.js文件 "use strict"; import Vue from 'vue'; import axios fr ...

  8. vue 脚手架搭建新项目以及element-ui等vue组件的使用

    vue快速搭建项目(前提是你的电脑已经安装了node的环境和vue脚手架安装,不会的自行百度) 1:打开终端: 这里说下此时位置是在User下的lijuntao文件夹下面,我一般会在桌面新建一个文件夹 ...

  9. Vue.js 安装及其环境搭建

    For me or other first studying vue.js. For Windows PC: 1.先安装node.js 安装官网最新的即可 版本应该要大于6.0版本 nodejs的官网 ...

  10. 【转载】Vue.js 安装及其环境搭建

    注:最近在学习Vue,以下是环境搭配方法: ****************************************************************************** ...

随机推荐

  1. 关于 update别名 与update select

    正确写法:  update  别名 set 别名点字段 =xxxx UPDATE a SET a.StandardID = (SELECT b.StandardID FROM SurgeryMappi ...

  2. C# 文件重命名

    记得C# File类中是没有rename这个方法 所以网上很多都用的是move moveTo copy+delete等这些方法 其实以上的方法 虽然可以实现功能 但看起来总觉得很蛋疼 今天百度 突然发 ...

  3. Liferay 6.2 改造系列之三:删除Docbar中的添加内容功能

    在/portal-master/portal-web/docroot/html/portlet/dockbar/add_panel.jsp文件中 将以下内容: if (hasAddContentAnd ...

  4. java7-3 继承

    1.继承概述: 把多个类中相同的内容给提取出来定义到一个类中. 如何实现继承呢? Java提供了关键字:extends 格式: class 子类名 extends 父类名 {} 父类也称为基类.超类: ...

  5. golang 常用网址收藏

    1:beego 模板语法指南:http://blog.go-china.org/03-beego-template 2:go 语言sublimetext2配置:http://www.kankanews ...

  6. 笔记-iOS弹幕(源码)实现原理解析

    最近,读完今年的第三本书<大话移动APP测试 Android与iOS>,在读到陈晔前辈改变中国测试行业的决心时,内心无比激动,作为一名初生的开发人员,我可能还无法理解测试行业的本质,但他那 ...

  7. mysql备份和恢复

    摘自:http://safe.it168.com/a2009/1108/805/000000805490.shtml 要备份数据库" phpbb_db_backup " #mysq ...

  8. Map中的entrySet();跟keySet();的区别是什么

    JAVA中entrySet();跟keySet();的区别是什么 红叶_书生 | 浏览 10397 次  2014-04-10 10:45 2014-04-10 10:49   最佳答案   keyS ...

  9. Mybatis源码之Statement处理器RoutingStatementHandler(三)

    RoutingStatementHandler类似路由器,在其构造函数中会根据Mapper文件中设置的StatementType来选择使用SimpleStatementHandler.Prepared ...

  10. 升级openssl 操作记录

    openssl 是一群黑客最爱研究搞怪的一个软件为啥,据说openssl是一群数学家编写的一套算法 哈哈 好,说正事 openssl 经常发布补丁包,因为升级是避免不了的 步骤: 查看当前openss ...