使用vue脚手架和element-ui使用

Vue脚手架

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

1. 安装3.x版本的Vue脚手架： npm install -g @vue/cli

基于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

分析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

导入使用：

1. 安装：npm install element-ui -S

2. main.js导入组件库：import ElementUI from "element-ui";

3. main.js中导入样式import "element-ui/lib/theme-chalk/index.css"

4. main.js中使用Vue.use(ElementUI)

5. 在App.vue中复制html代码。

可视版安装

1. 添加插件：搜索vue-cli-plugin-element
2. import on demand 按需导入
3. zh-CN
4. element.js注册了button，这样每个都能使用button按钮了