vue(2)学习历程----从iview框架入手
我曾经已经按照vue官网的各种小demo都写了一遍。现在我想做个项目,完整的。我不是专业的前端,写组件恐怕会费很多精力,于是我决定使用iview的组件来完成我的项目。
进行这些之前,我们需要做一些准备工作。
- 从官网下载nodejs
- 检验nodejs是否安装成功 npm -v
- 最好将npm升级到最新版本并全局安装 npm install -g npm
- 选择速度更快的淘宝镜像并全局安装 npm install -g cnpm
- 全局安装脚手架 cnpm install -g vue-cli
- 全局安装webpack cnpm install -g webpack
准备工作完成
我会从两个方式进行展开构建和使用
使用官方http://v1.iviewui.com/docs/gu... 提供的推荐工程 iview-project,在快速上手一栏。
- 将文件夹下载成功之后,在cmd里,切换到所在路径
- 根据其github提示,首先执行命令 cnpm install
- 继续执行命令 cnpm run init
- 最后执行命令 cnpm run dev 此时自动弹出一个浏览器的iview欢迎页面。
使用脚手架,通过可视化方式搭建我的项目。
- cmd切换到要安装项目的路径,创建项目,并写上项目名称 vue init webpack projectname
- 进入安装阶段,Project name(projectname) 项目名称(必须小写),可以指定输入项目名称,也可以直接回车默认用projectname
- Project description(A Vue.js project)项目描述,可以直接回车使用默认的
- Author 作者,输入你的名字
- 接下来有3个选项,字体加粗的是我的选择
Runtime+Compiler:recommended for most users 运行加编译
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 仅运行时 - Install vue-router?(Y/n) 是否安装vue-router 输入Y
- Use ESLint to lint your code?(Y/n) 是否使用ESLint管理代码,ESLint是个代码风格管理工具,用来统一代码风格,为了多人合作。
- Pick an ESLint preset(Use arrow keys) 接下来有3个选项,字体加粗的是我的选择
standard(https://github.com/feross/sta... 标准,github有中文版描述
AirBNB(https://github.com/airbnb/jav... 最合理的方法,githuv有中文版的描述,正是因为它的描述更仔细,所以我选择它
none(configure it yourself)这个不用说,自己定义风格 - Setup unit tests?(Y/n)是否安装单元测试 Y
- Pick a test runner 我选择jest
- Setup e2e tests with Nightwatch(Y/n) 是否安装e2e测试 Y
- 项目搭建好之后,cmd切换到项目目录projectname,输入cnpm install,这条命令是按照项目根目录下的package.json文件中所依赖的模块进行安装,这个文件里面不允许有任何注释,每个使用npm管理的项目中都有这个文件,是npm操作的入口文件。安装完成之后,目录会多出来一个node_modules文件夹,里面存放的是所有依赖的模块。这个文件很大很大,所以大家不会向服务器上传这个文件的。
- 安装iview的命令行是:cnpm install iview --save
- 测试环境是否搭建成功 cnpm run dev
命令行提示我:DONE Compiled successfully in 28938ms
Your application is running here:http://localhost:8081 哈哈成功了哦
如果你想继续输入的话,那么这个链接会作废的,contrl+c之后,继续输入无论是Y还是N,这个链接都不可以用了,所以建议还是重新打开一个cmd窗口使用命令行吧 - 慢慢开发中,我想去掉严格模式,于是把config/index.js里面的dev属性,useEslint设置成false.
- 反正目前iview的官方手册有些问题,比如在定制主题一栏,最终我根据iview-theme的github的说明来做,还好成功了。
相关推荐
yuzhu 2020-11-16
85477104 2020-11-17
KANSYOUKYOU 2020-11-16
sjcheck 2020-11-03
怪我瞎 2020-10-28
源码zanqunet 2020-10-28
gloria0 2020-10-26
王军强 2020-10-21
学习web前端 2020-09-28
QiaoranC 2020-09-25
anchongnanzi 2020-09-21
安卓猴 2020-09-12
Macuroon 2020-09-11
kiven 2020-09-11
LittleCoder 2020-09-11
Cheetahcubs 2020-09-13
小焊猪web前端 2020-09-10
颤抖吧腿子 2020-09-04
softwear 2020-08-21