Vue脚手架
Vue脚手架可以快速生成Vue项目基础的架构。
- 安装3.x版本的Vue脚手架:
npm install -g @vue/cli
基于3.x版本的脚手架创建Vue项目:
- 使用命令创建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
- 基于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:
- new一个Vue的实例对象
- 把router挂载上去
- 通过render函数把根组件渲染到首页上去
- 通过$mount方法把Vue实例挂载到app所在区域
new Vue({
router,
render:h=>h(App)
}).$mount("#app")
Vue脚手架的自定义配置
- 不推荐在
package.json
里配置 - 通过单独的文件中配置文件进行配置,创建
vue.config.js
文件
A.通过 package.json 进行配置 [不推荐使用],打包成功时,自动打开浏览器
"vue":{
"devServer":{
"port":"9990",
"open":true
}
}
B.通过单独的配置文件进行配置,创建vue.config.js
module.exports = {
devServer:{
port:8888,
open:true
}
}
Element-UI的基本使用
- Element-UI:一套基于2.0的桌面端组件库
- 官网地址:http://element-cn.eleme.io/#/zh-CN
导入使用:
-
安装:npm install element-ui -S
-
main.js
导入组件库:import ElementUI from "element-ui";
-
main.js
中导入样式import "element-ui/lib/theme-chalk/index.css"
-
main.js
中使用Vue.use(ElementUI) -
在App.vue中复制html代码。
可视版安装
- 添加插件:搜索
vue-cli-plugin-element
- import on demand 按需导入
- zh-CN
- element.js注册了button,这样每个都能使用button按钮了