vue的视图化创建项目_vue-cli3用图形化的方式创建项目

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