从零开始搭建一个项目-前端框架(vue)
基础框架:Vue
UI框架:iview
样式:less
用到模块:vuex vue-router
Ajax:anios
第一步 安装淘宝镜像代替npm(可省略,如果省略了,后面所有cnpm改为npm)
npm install -g cnpm --registry=https://registry.npm.taobao.org
第二步 创建Vue项目
按照https://vuejs-templates.github.io/webpack/中写的一步步执行
1、 npm install -g vue-cli
2、vue init webpack my-project
my-project:项目所在文件夹名称
执行后会出现:
(1)Project name 输入你的项目名称
(1)Project description 输入项目描述
(1)Author xxxxx <xxxxxx@xxx.com>回车
(1)Install vue-router? (Y/n) 是否安装vue-router根据个人情况填写是否安装
(1)Use ESLint to lint your code? (Y/n) 是否安装ESLint根据个人情况填写是否安装
(1)Set up unit tests? (Y/n) 是否安装单元测试根据个人情况填写是否安装
(1)Setup e2e tests with Nightwatch? (Y/n) 是否要安装端对端测试根据个人情况填写是否安装
3、cd my-project
4、npm install
5、npm run dev
好了,到这一步,基本的vue项目已经好了。ps:如果想让项目启动后自动打开浏览器,在config下的index.js文件中找到autoOpenBrowser,把它的值改为true即可。
第三步 安装less
cnpm i less --save
第四部 安装less-loader
cnpm i less-loader --save
第五步 安装iview
找到iview官网,里面有安装教程https://www.iviewui.com/docs/guide/install
cnpm install iview --save
第六步 安装iview-loader
cnpm install iview-loader --save-dev
第七步 安装axios
cnpm install axios --save
第八步 安装vuex
https://vuex.vuejs.org/zh/installation.html文档中有安装步骤
cnpm install vuex --save
至此,依赖库什么都装的差不多了,装好了之后并未结束,还需要引入到项目中
第九步 引入
(1)引入vuex 参考官方文档
(1)引入iview 参考官方文档
import Vuex from 'vuex'
// 引入iview
import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.use(iView);
Vue.use(Vuex)
配置 webpack,改写平时 vue-loader 的配置,形如:
https://www.iviewui.com/docs/guide/iview-loader
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
改写为:
{
test: /\.vue$/,
use: [
{
loader: 'vue-loader',
options: {}
},
{
loader: 'iview-loader',
options: {
prefix: false
}
}
]
},
改写原因:用<Switch>标签写了个demo测试iview,发现未生效,文档说如果没有引入iview-loader,要用<i-Switch>代替<Switch>标签。为了不加i-,引入了iview-loader,并对其进行以上配置。
引入结束也不算结束,我们需要测试下我们引入的这些到底有没有生效,所以就简单写个demo测试下
1、测试Vuex 在main.js里面添加store: Vuex,
2、写测试代码
<div class="test-iview"><Switch size="large" /><Switch /><Switch size="small" /></div><div class="test-less"><p class="less-p">测试less</p></div>
created () {console.log(this.$store, '测试store vuex')}
<style lang="less" scoped>.test-less {.less-p {color: blue;}}
</style>
以上工作做完了,这个项目也就算搭好啦,至于别的东西,与业务场景相关度比较大。自由发挥吧。
转载于:https://www.cnblogs.com/yhz01/p/9523070.html
从零开始搭建一个项目-前端框架(vue)相关推荐
- spring boot:从零开始搭建一个项目 - day8 实现jwtToken验证
锻炼不就是为了吃更多好吃的吗 --刚去完健身房然后开了包薯片=-= spring boot:从零开始搭建一个项目 - day8 实现jwtToken验证 一.生成token 二.重写拦截器 咳,书接上 ...
- spring boot:从零开始搭建一个项目 - day 7 springboot devtools热加载+MybatisPlus配置+kisso从入门到放弃
spring boot:从零开始搭建一个项目 - day 7 springboot devtools热加载+MybatisPlus配置+kisso从入门到放弃 一.springboot devtool ...
- spring boot:从零开始搭建一个项目 - day 5 Mybatis plus代码自动生成器
spring boot:从零开始搭建一个项目 - day 5 Mybatis plus代码自动生成器 一.Mybatis plus代码自动生成器 1.引入配置 2.创建Controller 3.执行m ...
- spring boot:从零开始搭建一个项目 - day 4 控制台输出日志美化 + swagger2
spring boot:从零开始搭建一个项目 - day 4 控制台输出日志美化 + swagger2 一.logback.xml配置日志美化 二.集成swagger2 1.引入依赖 2.编写配置文件 ...
- 从零开始搭建一个私有前端组件库
前言 本文的代码部分基于vue2 + ts ,最终的文件目录如下 一.让vue能够正确use组件 1.1 准备工作 首先用cli,根据自己的需求创建一个项目,然后根据自己习惯或团队的规范可以做一些项目 ...
- java dagger2_从零开始搭建一个项目(rxJava+Retrofit+Dagger2) --完结篇
鸡汤:感到迷茫是因为你没有给自己做好人生规划 接上一章的内容,如果还没看过的朋友, 请点 本章内容 Dagger2的引入 Dagger2的引入 Dagger2是一个依赖注入框架,那么dagger2能起 ...
- java dagger2_从零开始搭建一个项目(rxJava+Retrofit+Dagger2) ---上
工程结构 Androd studio 替代eclipse给我带来最大的感觉,就是不用每次需要用到什么类库,就得去网上下载一个jar包.只要在项目app/build.gradle中加入代码,就能远程使用 ...
- 从零开始搭建一个vue项目 -- vue-cli/cooking-cli(一)
从零开始搭建一个vue项目 -- vue-cli/cooking-cli(一) 1.vue-cli搭建一个可靠成熟的项目 1.介绍 vue-cli 我是去年六月份接触的vue1.0,当时还是个菜逼,当 ...
- 使用 Single-SPA 从零开始搭建 React 微前端项目
在这篇博客中,我们将探讨如何使用Single-SPA从零开始搭建一个React微前端项目,该项目将包含三个不同的子应用.我们将使用Webpack包管理工具和yarn来管理依赖关系,并使用Single- ...
最新文章
- 2014东师计算机应用基础离线作业,2014秋东师 计算机应用基础 离线作业及答案...
- 2017 五月 UFED Series Releases 系列 6.2更新发布
- Unity3D的一些坑
- java数据同步处理_Java如何处理多线程的数据同步问题
- 使用.bat文件或者是cmd里面运行.jar文件
- java_IO流之 NIO
- nginx 不带www到www域名的重定向
- 算法分析与设计「五」动态规划
- cuda并行编程之求解ConjugateGradient(共轭梯度迭代)丢失dll解决方式
- php mysql搜索功能并分页_php实现搜索和分页效果-亲测有效
- 2017 技术大检阅
- html选择器优先级如何计算,CSS选择器权重计算与优先级
- audio播放器进度条
- java 正则表达式电话邮箱_Java编程:正则表达式判断邮箱及电话号码是否有效
- 长沙地铁一号线大客流运输组织优化研究
- c#winform使用EntityFramework导入数据库
- python报考软考哪个比较好_软考考什么比较好?
- STM32硬件I2C与软件模拟I2C超详解
- xampp 64位 php5.2,XAMPP 64位
- 地下水位监测预警方案 | 助力城市排水信息化
热门文章
- python doc转换成docx以及读取docx
- 13,excel vba 代码的简化和重复使用_初识对像
- 日本动画现状“我是一个前动画师,有什么要问的”
- c++沙盒小游戏1.0
- GEE(1):GEE 影像去云(Sentinel-2)
- 二维火收银显示服务器超时怎么办,配件连接及后台设置二维火服务中心.pdf
- 团子杂记:SAP收入确认工具RAR(Revenue RecognitionReporting)在新收入准则下的应用
- 降低包装成本的 13 种简单方法
- 模拟高清的种类分布:CVI,TVI,AHD
- IM开发者的零基础通信技术入门(一):通信交换技术的百年发展史(上)