Vue脚手架可以快速生成Vue项目基础的架构。
A.安装3.x版本的Vue脚手架:
npm install -g @vue/cli
B.基于3.x版本的脚手架创建Vue项目:
1).使用命令创建Vue项目
命令:vue create my-project
选择Manually select features(选择特性以创建项目)
勾选特性可以用空格进行勾选。
是否选用历史模式的路由:n
ESLint选择:ESLint + Standard config
何时进行ESLint语法校验:Lint on save
babel,postcss等配置文件如何放置:In dedicated config files(单独使用文件进行配置)
是否保存为模板:n
使用哪个工具安装包:npm
2).基于ui界面创建Vue项目
命令:vue ui
在自动打开的创建项目网页中配置项目信息。
3).基于2.x的旧模板,创建Vue项目
npm install -g @vue/cli-init
vue init webpack my-project C.分析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:

说几个重要的点。

预设要选择  手动配置

功能 要选 第一个babel  router vuex  Linter/Formatter  和最后一项 使用配置文件。

配置 要选 第三个,EsLint+Standard config  标准版

Vue脚手架的自定义配置

运行 npm run server  的时候项目的端口号和帮你自动打开网页。

A.通过 package.json 进行配置 [不推荐使用]
"vue":{
"devServer":{
"port":"9990",
"open":true
}
}
B.通过单独的配置文件进行配置,创建vue.config.js
module.exports = {
devServer:{
port:8888,
open:true
}
}

Element-UI的基本使用

第一步安装依赖,第二步在main中引入相关的文件

A.安装:
npm install element-ui -S
B.导入使用:
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css"; Vue.use(ElementUI)

用图形化来添加element-ui依赖 推荐

先按照上面写的创建一个项目,然后点击插件 - 添加插件 - 搜 vue-cli-plugin-element 并安装。 选择按需导入吧。  ok

vue-cli3用图形化的方式创建项目的更多相关文章

  1. vue环境搭建以及使用vue-cli创建项目

    我要跑vue项目,所以我要搞vue. 1.环境搭建 进入node官网下载对应版本的node,一步步安装即可. 安装会自动配置路径和npm包管理环境,通过node -v进行验证 2.安装vue-cli脚 ...

  2. VUE CLI 3.0 安装及创建项目

    一.安装 VUE CLI 3.0 官网: https://cli.vuejs.org/   详细资料可以自己先把官网过一遍. 1. 安装(默认你的电脑上已安装node及npm) npm install ...

  3. Vue 学习记录(一)-创建项目

    环境准备 node.js vue-cli 安装配置环境 1.下载node.js,使用默认配置安装 . 2.使用npm命令安装国内下载镜像(可选) cmd: npm install  -g  cnpm  ...

  4. Vue中解决新脚手架3创建项目的移动端双击屏幕放大,双手拉动放大的方法

    替换新版vue-cli创建项目的public>index.html <!DOCTYPE html> <html lang="en"> <head ...

  5. 初学Vue.js,用 vue ui 创建项目会不会被鄙视

    全栈的自我修养: 6使用vue ui进行vue.js环境搭建 It is only with the heart that one can see rightly. What is essential ...

  6. vue进阶:基于vue-cli创建项目(搭建手脚架)

    vue-cli安装.创建项目 基于vue-cli创建的项目进行开发 使用vue-cli图形化界面搭建项目 插件与工具 一.vue-cli简介.安装.创建项目 Vue-cli是基于Vue.js进行快速开 ...

  7. redis数据库-VUE创建项目

    redis数据库 ''' 关系型数据库: mysql, oracle 非关系型数据库(nosql): redis,mongodb (没有表的概念) key-value mongodb: json 数据 ...

  8. VUE创建项目

    Vue Cli项目搭建     vue项目需要自建服务器:node 什么是node: 用C++语言编写,用来运行JavaScript语言 node可以为前端项目提供server (包含了socket) ...

  9. Vue创建项目配置

    前言 安装VS Code,开始vue的学习及编程,但是总是遇到各种各样的错误,控制台语法错误,格式错误.一股脑的袭来,感觉创建个项目怎么这个麻烦.这里就讲一下vue的安装及创建. 安装环境 当然第一步 ...

随机推荐

  1. iframe跨域修改子页面内容或样式

    哈哈 当然不能啦 要是能修改百度logo早就是我的头像了

  2. 欢迎访问阿里云Go Module代理仓库服务

    简介 go module公共代理仓库,代理并缓存go模块.你可以利用该代理来避免DNS污染导致的模块拉取缓慢或失败的问题,加速你的构建. 地址 https://mirrors.aliyun.com/g ...

  3. CRLF

    提示信息: Inject false data in the journalisation log. -------------日志中注入错误数据 开始挑战后,进入如下界面-------------- ...

  4. Laravel 自定义公共函数全局使用,并设置自定加载

    开发中经常定义一些公共函数(如:获取用户信息.csv导入导出等常用函数),方便控制层,模型层调用. 那么在Laravle框架中怎么使用? 方法如下: 1.在根目录app下新建公共目录Library/U ...

  5. csp-s 考前刷题记录

    洛谷 P2615 神奇的幻方 洛谷 P2678 跳石头 洛谷 P1226 [模板]快速幂||取余运算 洛谷 P2661 信息传递 LOJ P10147 石子合并 LOJ P10148 能量项链 LOJ ...

  6. (尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)

    自定义事件: 我们知道,父组件使用prop传递数据的子组件,但子组件怎么跟父组件通信呢? 这个时候Vue的自定义事件系统就派得上用场了. 自定义事件知道两件事: (1).绑定 (2).触发 注意:$o ...

  7. 14-网页,网站,微信公众号基础入门(网页版MQTT,小试牛刀)

    https://www.cnblogs.com/yangfengwu/p/11192639.html 抱歉哈...最近由于做板子,,教程的进度落下了... 这些天总共做了还几块板子 首先对当前这个教程 ...

  8. jQuery获取各种标签的文本和value值

    <select id="test"> <option value ="volvo">Volvo</option> <o ...

  9. ubuntu之路——day19.2 开源框架与迁移、CNN中的数据扩充

    开源框架与迁移 上面介绍了一些已经取得很好成绩的CNN框架,我们可以直接从GitHub上下载这些神经网络的结构和已经在ImageNet等数据集上训练好的权重超参数. 在应用于我们自己的数据时. 1.如 ...

  10. docker swarm 集群搭建

    创建一个集群 [vagrant@node1 ~]$ docker swarm init --advertise-addr 192.168.9.101 Swarm initialized: curren ...