从0搭建一个vue框架

1.安装vue/cli
npm install -g @vue/cli
2.安装vue/init
npm install -g @vue/cli-init
3.执行vue安装命令
vue init webpack 文件名(mytest)
4.安装less
npm install less less-loader --save
5.配置less
rules: [
{
test: /.less$/,
loader: “style-loader!css-loader!less-loader”
}
]
放在webpack.base.conf.js文件中
‘<'style scoped lang=“less”> style中直接加lang=“less”
这里安装完后执行还可能会报错,因为less版本过高,所以需要卸载重新装或者一开始就装这个版本的
参照https://blog.youkuaiyun.com/l244112311/article/details/105844036/
6.安装antd-design
$ npm i --save ant-design-vue
7.配置antd-design
import Vue from ‘vue’;
import Antd from ‘ant-design-vue’;
import App from ‘./App’;
import ‘ant-design-vue/dist/antd.css’;
Vue.config.productionTip = false;

Vue.use(Antd);

new Vue({
el: ‘#app’,
components: { App },
template: ‘’,
});
8.也可以安装element-ui
npm i element-ui -S
9.配置element-ui
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)
});

以下是使用Vue搭建一个app框架的步骤: 1. 创建一个Vue项目 可以使用Vue官方提供的Vue CLI工具创建一个新的Vue项目,也可以手动创建一个Vue项目。 2. 安装相关依赖 在创建好的Vue项目中,需要安装一些相关的依赖库,例如vue-router、vuex、axios等。 可以使用npm命令安装这些依赖库: ``` npm install vue-router vuex axios --save ``` 3. 配置路由和状态管理 在src目录下创建一个router.js文件,用于配置路由规则。在src目录下创建一个store.js文件,用于配置状态管理。 4. 创建视图组件 在src目录下创建一个views目录,用于存放各个视图组件。可以根据实际需要创建不同的视图组件。 5. 创建公共组件 在src目录下创建一个components目录,用于存放公共组件。例如Header、Footer等组件可以放在这里。 6. 创建App.vue组件 在src目录下创建一个App.vue组件,用于定义整个app的布局和结构。 7. 在main.js中引入依赖库和组件 在main.js文件中,引入相关依赖库和组件,并实例化Vue对象。 8. 在App.vue中配置路由和状态管理 在App.vue中引入router和store对象,并在template中使用router-view和vuex的mapState、mapActions等指令。 9. 运行Vue项目 在命令行中运行npm run serve命令,启动Vue项目。可以在浏览器中访问http://localhost:8080查看效果。 以上就是使用Vue搭建一个app框架的步骤。需要根据实际需求进行调整和修改。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值