前端萌新看过来了—— 0基础1小时vue入门到实战_vue入门需要多长时间(1)

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

4. vue的两大核心

• 组件系统。万物皆为组件，实现代码重用，提高开发效率和代码质量，项目的组织形式较为灵活
• 数据驱动。不直接操作dom，减少性能损耗，数据操作与展现也更加方便。

项目概览

• 开发工具：vscode（推荐使用的前端开发工具）
• Vue版本：V 2.6.11
• element ui版本：V 2.15.1
• 接口调试：axios库 V 0.21.1
• 脚手架版本: V 4.5.0
• node版本：V 13.14.0

1. 脚手架安装与搭建

脚手架安装

• 旧版本（版本过老，不建议使用了）
  拉取 2.x 模板 (旧版本)

npm install vue-cli -g 
vue init webpack my-project

• 新版本，Vue-cli3.0+（推荐使用）

npm install -g @vue/cli 
vue create hello-world[项目名]

如存在旧版本，请先删除

npm uninstall vue-cli -g 

• 创建命令（UI界面模式）

vue ui

2. 初始创建建议

• 考虑到新手，所以先降低难度，选择此三项即可
  
• 其它配置
  
  这样就可以了，它会帮你搭建好一个脚手架，文件目录如下：
  
• 打开本地的8080端口（vue默认的）看到如下界面，证明你的第一步就完成了，恭喜恭喜！
  

3. 引入element ui框架

• 安装

npm i element-ui -S

• 整个引入（不建议，会造成代码冗余，某些组件并没有使用，而你却引入了，就像是娶了很多老婆，你会忙不过来的。但是如果你为了降低难度，可以先这么干）
• main.js完成如下配置即可：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

• 按需引入（推荐使用）

1. 需要安装一个插件完成配置

npm install babel-plugin-component -D

2. 配置 babel.config.js 文件，代码如下：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ],
}

3. 配置 main.js 入口文件，代码如下

import Vue from 'vue'
import App from './App.vue'
import router from './router'

// 引入需要的组件
import {
  Button,
} from 'element-ui';

// 注册此组件，便可全局使用
Vue.use(Button)

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

export default vue;

4. 测试UI框架引入是否有效

我们只需要在任意.vue文件添加如下代码：（比如就在HelloWorld.vue页面）

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

入研究，那么很难做到真正的技术提升。**

需要这份系统化的资料的朋友，可以添加戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！