安装vue脚手架的大致流程
安装vue脚手架前需要安装node.js和npm
npm在安装node.js时候自带
Vue脚手架可以快速生成Vue项目基础的架构。
安装最新版本的Vue脚手架:
window+R按键下输入cmd打开命令行输入:
npm install -g @vue/cli
这个过程依赖于你的网速,一般等待时间因人而异,我安装时候足足等待了半小时。
基于3.x版本的脚手架创建Vue项目:
1).使用命令创建Vue项目
cmd命令: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项目
cmd命令打开:vue ui
在自动打开的创建项目网页中配置项目信息。
3).分析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配置文件
Vue脚手架的自定义配置
A.通过 package.json 进行配置 [不推荐使用]
"vue":{
"devServer":{
"port":"9990",
"open":true
}
}
B.通过单独的配置文件进行配置,创建vue.config.js
module.exports = {
devServer:{
port:8888,
open:true
}
}
17.Element-UI的基本使用
Element-UI:一套基于2.0的桌面端组件库
官网地址:http://element-cn.eleme.io/#/zh-CN
A.安装:
npm install element-ui -S
B.导入使用:
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";