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