当前位置: 首页 > 工具软件 > Muse-UI > 使用案例 >

vue + Muse-ui 开发app(一)准备篇

汤飞
2023-12-01

 

1.准备篇 

安装vs code 地址  https://code.visualstudio.com/docs/?dv=win

vscode 中文插件 参考https://blog.csdn.net/qq_24118527/article/details/82793610

安装 node.js 地址 https://nodejs.org/en/ 

node.js 安装步骤 https://www.runoob.com/nodejs/nodejs-install-setup.html 

2.vue 安装 

一、需要代理的设置一下 ,不需要的直接忽略掉从第三步开始

npm config set proxy http://username:password@server:port/
npm confit set https-proxy http://username:password@server:port/

二 、不需要的直接忽略掉从第三步开始

npm config set registry "http://registry.npmjs.org/"

三.安装webpack

npm install webpack -g

四.安装vue脚手架

npm install vue-cli -g

五.安装 vue 路由模块vue-router

npm install vue-router --save

六.创建一个简单的vue项目

1.vue init webpack demo1 //创建一个简单的项目

? Project name  输入项目名称

? Project description 输入项目描述

? Author 作者

? Vue build 打包方式,回车就好了

? Install vue-router?  选择  Y 使用 vue-router,输入 N 不使用

? Use ESLint to lint your code? 代码规范,推荐 N

? Setup unit tests with Karma + Mocha? 单元测试,推荐 N

? Setup e2e tests with Nightwatch? E2E测试,N

2.npm install //引入项目依赖
3.npm run dev //运行

 

七.安装muse-ui

npm i muse-ui -S
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css"/>    

 八. 引用

import Vue from 'vue';
import MuseUI from 'muse-ui';
import 'muse-ui/dist/muse-ui.css';

Vue.use(MuseUI);

new Vue({
  el: '#app',
  render (h) {
    return h('mu-button', {}, 'Hello World');
  }
});

 九. 运行一下 

npm run dev 

可能会出现的问题 (目前只碰到了这个)

vue 报错:Module build failed: Error: Cannot find module 'node-sass'

解决方法:

输入命令:cnpm install node-sass@latest

 

 类似资料: