如何新建一个Vue项目并导入element-ui的模板

一、基本环境配置

工欲善其事必先利其器!配置环境也是很让初学者头疼的问题,但作为基础还是要学的,切莫眼高手低。这个操作适用于Windows系统,同时各个环境及配置都是最新版本。
首次创建需要的配置有:

  1. npm 想要下载 npm 可以先去 Node 的官网上下载安装 Node ,安装完 Node 之后会自带 npm 。此刻可以通过命令语句 npm -v 查看 npm 是否安装成功。可根据需要更新 npm 至最新版,更新指令为 npm install -g npm
  2. 淘宝镜像 为什么需要这个东西呢?因为 npm 的服务器是国外的服务器,我们访问外国服务器很慢。于是淘宝就把 npm 的资料拷贝到了自己的服务器上,就是我们要用到的淘宝镜像。安装淘宝镜像的指令为:
    npm install -g cnpm --registry=https://registry.npm.taobao.org
  3. vue-cli vue脚手架,具体的用处就不说了。指令为 cnpm install vue-cli -g
    vue list 指令可以用来查看 vue-cli 是否安装成功(当淘宝镜像安装好以后之后的“npm”改用“cnpm”)。如果安装成功会出现以下显示如果成功显示
  4. webpack 指令为 cnpm install -g webpack

以上配置均为一次性,初次配置完以后,可以不再配置。

二、新建 Vue 项目

  • 4
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
可以使用 Vue-cli 快速搭建基于 Vue.js 的项目结构并在此基础上添加 element-ui 和 three.js 的依赖库。以下是相关的命令: 1. 安装 Vue-cli ``` npm install -g @vue/cli ``` 2. 创建一个基于 Vue.js 的项目 ``` vue create your-project-name ``` 3. 进入项目目录并添加 element-ui 和 three.js 的依赖库 ``` cd your-project-name npm i element-ui three ``` 4. 在 main.js 中导入 element-ui 和 three.js 的样式和组件 ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import * as THREE from 'three' import App from './App.vue' Vue.config.productionTip = false Vue.use(ElementUI) Vue.prototype.$THREE = THREE new Vue({ render: h => h(App), }).$mount('#app') ``` 5. 在 App.vue 中创建一个包含 three.js 场景的组件 ```vue <template> <div class="three-container"></div> </template> <script> export default { name: 'App', mounted () { // 初始化 three.js 场景 const scene = new this.$THREE.Scene() const camera = new this.$THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ) const renderer = new this.$THREE.WebGLRenderer() renderer.setSize(window.innerWidth, window.innerHeight) document.querySelector('.three-container').appendChild(renderer.domElement) const geometry = new this.$THREE.BoxGeometry(1, 1, 1) const material = new this.$THREE.MeshBasicMaterial({ color: 0x00ff00 }) const cube = new this.$THREE.Mesh(geometry, material) scene.add(cube) camera.position.z = 5 const animate = () => { requestAnimationFrame(animate) cube.rotation.x += 0.01 cube.rotation.y += 0.01 renderer.render(scene, camera) } animate() } } </script> <style scoped> .three-container { width: 100%; height: 100%; position: fixed; } </style> ``` 这样就可以创建一个基于 Vue.js、element-ui 和 three.js 的后台管理系统模板

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值