vue脚手架和element组件库

vue脚手架用于快速生成vue项目基础架构： http://cli.vuejs.org/zh/

安装脚手架

npm install -g @vue/cli (cmd中安装)

vue -V (查看是否安装成功)

vue脚手架的基本用法

创建vue项目
vue create my-projrct      //(default  or  mannely   默认安装或者手动安装)
						//use history mode for router?        yes/no
						//pick a linker /formatter config     standard config
成功创建项目
cd my-project         进入到项目目录
npm run serve         启动项目

项目启动后会生成一个链接，例如：
-local: http://lovalhost:8080/
-network: http://172.16.56.128:8080/      选择链接复制到浏览器查看效果

方法二：创建vue项目(vue版本低于3.0没有ui功能的,低于3.6 ui创建项目报错，所以尽量选择3.6以上，4.0以下的版本)
vue-h    //查看是否有ui功能
创建--》选择目录--》创建新项目--》填写项目名称--》git仓库（填写初始的提交信息）
--》选择配置（默认，手动，历史版本）
	选择“手动”--》banel + router + linter + 使用配置文件（单独保存到每个文件）
	配置   （standard）  lint on save

• 疑问，为什么使用ui创建项目 无法选择除c盘之外的文件夹？

• ​ 手动配置情况下 空格 为选项上* 表示选择配置该项
  

• 手动配置选项

• 进入项目文件夹，启动项目（忽略我中间敲错一次命令，哈哈）
• 生成项目链接
  +

脚手架生成的项目结构分析

• 实际项目分析

• 

  • node-modules    //所有依赖包
    public          //静态资源文件
    	index        //首页
    	favicon.ico     //图标
    src             //所有源代码
    	assets         //资源
    	components     //组件
    	views         //视图组件
    app.vue         //根组件
    mian.js         //项目打包入口文件
    router.js       //路由配置
    package.json    //包管理文件
    
    

    vue脚手架的自定义配置

    在vscode中， 
    npm run serve   //启动项目
                    //复制network 地址
    设置项目启动，自动打开网页
    在package.json中配置文件
    "vue":{
    	"devServer":{
    		"port":8888,
    		"open":ture
    	}
    }               //所有属性都要用""
    //ctrl +c  结束项目后 重新启动项目npm run serve
    
    
    
    

    • 但是不推荐这种配置方式，因为package.json 主要用来管理包的配置信息；为了方便维护，推荐将vue脚手架的配置，单独定义到 vue.config.js配置文件中。

    通过单独的配置文件配置项目

    • 在项目的根目录创建文件vue.config.js

    • 在该文件中进行相关配置，从而覆盖默认配置

    • module.exports = {
      deServer:{
      //自动打开浏览器
      opens:true,
      port:8878
      } //会覆盖系统的默认配置，发现端口号变为8878
      }

    Element-UI的基本使用

一套为开发者，准备的基于vue2.0的桌面端组件库

官方地址：http://element-cn.eleme.io/#/zh-CN

• 1.基于命令行方式手动安装

  • 安装依赖包 npm install element-ui -S

  • 导入element-UI 相关资源

  • //导入组件库
    import ElementUI from 'element-ui';
    //导入组建相关样式
    import 'element-ui/lib/theme-chalk/index.css';
    //配置Vue插件
    Vue.use(ElementUI);
    

  • 

    • 进入element网站复制button组件的代码–》App.vue
    • 在这里插入图片描述

• 基于图形化界面自动安装

  • 运行vue ui命令，，打开图形化界面
    通过Vue项目管理器，进入具体的项目配置面板
    点击插件-》添加插件，进入插件查询面板
    搜索 vue-cli-plugin-element并安装
    配置插件，实现按需导入，从而减少打包后项目的体积